Loading...
Время настройки: 5 минут

Как сделать в Tilda
свой видеовиджет?

Модификация поможет сделать видеовиджет, зафиксировать в нужной части экрана, настроить размеры, цвета, кнопку и подключить Яндекс метрику
Генератор кода
Видео инструкция
Инструкция (Развернуть↓)
1. Регистрируемся на DropBox;

Стартовый тариф даёт возможность использовать 5 Гб памяти, этого вполне хватит для видеовиджета)

2. Перед загрузкой видео в DropBox убедитесь в следующем:

  • Видео в формате mp4, если нет его можно перевести в этот формат при помощи бесплатного сервиса Cloudconvert;
  • Размер видео должен быть не больше 560 х 1000 px;

3. Загрузив видео в DropBox нажимаем кнопку "Поделиться" и копируем ссылку, далее вставляем в генератор;

4. В генераторе указываем ссылку для кнопки, popup или любая другая ссылка;

5. Настраиваем положение видеовиджета;

6. Настраиваем визуальную часть в свернутом виде и развернутом: цвета, толщину, размеры, проценты увеличения, шрифт и т.д.;

7. Если нужно настраиваем Яндекс метрику или Google аналитику;

8. Добавляем блок Т123 и вставляем в него сгенерированный HTML код;

ВАЖНО: Dropbox может блокировать ссылки на видео, в данный момент ищем альтернативное решение!
Class элемента
Копировать код<!-- Как сделать видеовиджет в Tilda? --> 
<!-- https://nolim.cc/video-widget -->
<div class="video-widget" data-state="default"> <div class="video-widget__container"> <video id="video-widget__video" loop="" autoplay="" playsinline="" preload="auto" muted="muted" controlslist="nodownload" disablepictureinpicture="" class="video-widget__video" src="https://dl.dropboxusercontent.com/s/75ypvbasdr6403h/%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%822.mp4?dl=0"> <source src="https://dl.dropboxusercontent.com/s/75ypvbasdr6403h/%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%822.mp4?dl=0" type="video/mp4"> </video> <div class="video-widget__close"></div> <a class="video-widget__button t-text" target="_blank" href="https://nolim.cc/members/signup">Зарегистрироваться</a> </div> </div> <script> jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options.expires = -1; }; var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); }; var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }; function nolimvideowidgetcookie() { $.cookie('nlvideowidget', 1, { expires: 1 }); }; $(document).ready(function() { var e = $(".video-widget"), a = document.getElementById("video-widget__video"); $(".video-widget__close").click(function(t) { return t.preventDefault(), "default" == e.attr("data-state") ? e.hide() : (e.attr("data-state", "default"), a.muted = !0), !1 }), $(".video-widget__container").on("click", function(t) { "default" == e.attr("data-state") ? (e.attr("data-state", "opened"), a.currentTime = 0, a.muted = !1) : (e.attr("data-state", "default"), a.muted = !0) }), $(document).mouseup(function(t) { e.is(t.target) || 0 !== e.has(t.target).length || "default" == e.attr("data-state") || (e.attr("data-state", "default"), a.muted = !0) }); $('.video-widget__close, .video-widget__button').click(function(e) { nolimvideowidgetcookie(); 
ym(76676514, 'reachGoal', 'copycode');
gtag('event', 'действие', { 'event_category': 'категория',
'event_label': 'ярлык',
'value': 'ценность'
});
}); if (Number($.cookie('nlvideowidget')) > 0) { $(".video-widget").hide(); } else { $(".video-widget").show(); } });
</script> <style> .video-widget { display: none; position: fixed; left: 0; z-index: 999999; bottom: 0 } .video-widget__container { font-family: Helvetica; z-index: 999999; overflow: hidden; border-style: solid; background: #eee; -webkit-transition: width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s; transition: width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s; -o-transition: width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -o-transform .2s ease-in-out 0s; -moz-transition: transform .2s ease-in-out 0s, width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -moz-transform .2s ease-in-out 0s; transition: transform .2s ease-in-out 0s, width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s; transition: transform .2s ease-in-out 0s, width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s, -moz-transform .2s ease-in-out 0s, -o-transform .2s ease-in-out 0s; outline: 0; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-box-shadow: rgba(0, 0, 0, .2) 0 10px 20px; box-shadow: rgba(0, 0, 0, .2) 0 10px 20px; position: absolute; left: 20px; bottom: 50px; border-radius: 20px; border-width: 5px; width: 130px; height: 180px; border-color: #fff } .video-widget__container:hover { -webkit-transform: scale(1.05) translate(5px, -5px); -moz-transform: scale(1.05) translate(5px, -5px); -ms-transform: scale(1.05) translate(5px, -5px); -o-transform: scale(1.05) translate(5px, -5px); transform: scale(1.05) translate(5px, -5px); border-color: #221e1e } .video-widget__video { -o-object-fit: cover; object-fit: cover; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 100%; min-height: 100%; z-index: 200; -webkit-transition: opacity .4s ease-in-out 0s; -o-transition: opacity .4s ease-in-out 0s; -moz-transition: opacity .4s ease-in-out 0s; transition: opacity .4s ease-in-out 0s; opacity: .9 } .video-widget__close { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; z-index: 250; opacity: 0; -webkit-transition: opacity .2s ease-in-out 0s, -webkit-transform .3s ease-in-out 0s; transition: opacity .2s ease-in-out 0s, -webkit-transform .3s ease-in-out 0s; -o-transition: opacity .2s ease-in-out 0s, -o-transform .3s ease-in-out 0s; -moz-transition: transform .3s ease-in-out 0s, opacity .2s ease-in-out 0s, -moz-transform .3s ease-in-out 0s; transition: transform .3s ease-in-out 0s, opacity .2s ease-in-out 0s; transition: transform .3s ease-in-out 0s, opacity .2s ease-in-out 0s, -webkit-transform .3s ease-in-out 0s, -moz-transform .3s ease-in-out 0s, -o-transform .3s ease-in-out 0s } .video-widget__close:after, .video-widget__close:before { position: absolute; left: 9px; top: 1px; content: " "; height: 18px; width: 2px; background: #fff; -webkit-box-shadow: rgba(0, 0, 0, .5) 1px 1px 10px; box-shadow: rgba(0, 0, 0, .5) 1px 1px 10px } .video-widget__close:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } .video-widget__close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) } .video-widget__container:hover .video-widget__close { opacity: .5 } .video-widget.video-widget[data-state=opened] .video-widget__container { width: 280px; height: 500px; border-radius: 20px; border-color: #fff } .video-widget.video-widget[data-state=opened] .video-widget__close { opacity: .5 } .video-widget.video-widget[data-state=opened] .video-widget__close:before { display: none } .video-widget.video-widget[data-state=opened] .video-widget__close:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg) } .video-widget.video-widget[data-state=opened] .video-widget__close:hover { opacity: 1 } .video-widget__button { position: absolute; bottom: 20px; right: 20px; left: 20px; height: 65px; border-radius: 2px; z-index: 300; -webkit-box-shadow: rgba(0, 0, 0, .25) 0 4px 15px; box-shadow: rgba(0, 0, 0, .25) 0 4px 15px; text-align: center; -webkit-transition: opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s; transition: opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s; -o-transition: opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -o-transform .2s ease-in-out 0s; -moz-transition: transform .2s ease-in-out 0s, opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -moz-transform .2s ease-in-out 0s; transition: transform .2s ease-in-out 0s, opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s; transition: transform .2s ease-in-out 0s, opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s, -moz-transform .2s ease-in-out 0s, -o-transform .2s ease-in-out 0s; visibility: hidden; background-color: #0058ff; font-size: 14px; font-weight: 100; color: #fff!important; text-align: center; vertical-align: middle; line-height: 65px; text-transform: uppercase; opacity: 0 } @media screen and (max-width: 480px){ .video-widget__button { font-size: 12px; } } .video-widget__button:hover { background-color: #0058ff; text-decoration: none } .video-widget.video-widget[data-state=opened] .video-widget__button { opacity: 1; visibility: visible } @media only screen and (max-width:1023px) { .video-widget__close { opacity: .5 } } @media only screen and (max-width:480px) { .video-widget__container { left: 15px; bottom: 15px; width: 90px; height: 125px } } </style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda