Как добавить в шейп zero-блока Тильды mp4 видео

Если хотите добавить на сайт фоновое видео формата .mp4 и без проблем настраивать его положение, размер и форму, то эта инструкция для вас. Вставка видео внутрь шейпа zero-блока решит все эти задачи. А еще такое видео можно анимировать, и все это будет работать также и на телефонах.

Я разбила данную инструкцию на два ключевых шага:

Оглавление:

Шаг 1.1. Получаем прямую ссылку на видео с Google Диска

Шаг 1.2. Получаем прямую ссылку на видео с собственного хостинга

Шаг 2. Рисуем zero-блок и вставляем на сайт код для видео

Шаг 1. Получаем прямую ссылку на видео

Так как Тильда не хранит у себя видеофайлы, то нам потребуется загрузить видео на сторонний сервис и получить на него прямую ссылку, чтобы по этой ссылке открывалось непосредственно само видео.

Загрузить видеофайл можно в любое облачное хранилище (Google Диск, Dropbox, Яндекс Диск, Облако Mail.ru) или собственный хостинг. Я лично предпочитаю второй вариант, т.к. скорость загрузки видео будет в разы выше, и это никак не затормозит ваш сайт. Но такой способ платный, а поэтому я расскажу и про первый тоже на примере Google Диска.

Шаг 1.1. Получаем прямую ссылку на видео с Google Диска

Загрузите на диск видео и откройте к нему доступ по ссылке:

Скопируйте ссылку на файл и вставьте ее в любой текстовый редактор. У вас должна быть ссылка вида:

https://drive.google.com/file/d/1GuSQ04-ItliRUXg8G-SPVQbx4N_EudvB/view?usp=sharing

Из этой ссылки вам нужно скопировать символы, которые являются идентификатором файла. В моем примере они выделены жирным текстом — после file/d/ и перед /view. А затем вставьте эти символы в конец вот этой ссылки:

https://drive.google.com/uc?export=download&id=

В итоге у вас получится прямая ссылка на видео такого вида:

https://drive.google.com/uc?export=download&id=1GuSQ04-ItliRUXg8G-SPVQbx4N_EudvB

Если вы перешли по получившейся ссылке, и у вас скачалось ваше видео, то значит вы все сделали правильно.

Шаг 1.2. Получаем прямую ссылку на видео с собственного хостинга

Где покупать хостинг — выбор за вами. Я остановилась на Beget (https://beget.com/ru/hosting/virtual), тариф Blog, SSL-сертификат в подарок (он нам понадобится).

После покупки хостинга на Beget перед вами откроется вот такая панель управления:

Зайдите в раздел «Домены и поддомены», купите там домен с любым именем (да, нужно будет еще потратиться и на домен).

Затем к купленному домену подключите SSL-сертификат по данной инструкции: https://beget.com/ru/kb/how-to/sites/podklyuchenie... (это займет несколько часов). Сертификат нужно подключать в обязательном порядке, т.к. без него ссылка на видео будет небезопасной, и Тильда не сможет открыть ее содержимое.

Как только все будет готово, в разделе «Домены и поддомены» вы увидите вот такую картину:

Теперь из панели управления перейдите в «Файловый менеджер», зайдите в папку с именем типа «ваш_логин.beget.tech», потоп в папку «public_html».

Создайте здесь папку с именем сайта, куда вы хотите разместить видео, например «swiftdesign» (без пробелов). Этот шаг нужен исключительно для вашего удобства, чтобы не запутаться в файлах. Обычно в папке с именем сайта я создаю еще одну с названием типа файла, например «video» или «images». Но если у вас всего один-два файла, то можно так не делать.

Далее в нужную папку загрузите сам файл, а его имя должно быть без пробелов. Готово! Теперь выпишите путь к файлу, который будет состоять из имени вашего домена и папок, которые вы создали внутри «public_html».

У меня ссылка на файл выглядит следующим образом: https://khudova.ru/swiftdesign/video/opening-a-laptop.mp4

Теперь, когда у нас есть прямая ссылка на видео, можем переходить к следующему шагу.

Шаг 2. Рисуем zero-блок и вставляем на сайт код для видео

Создаем zero-блок и рисуем в нем шейп для видео любой формы и размера. Шейп может быть на весь экран, чтобы сделать фоновое видео, а может быть небольшой плиткой в 12 колонок, на ваше усмотрение.

Вставляем в шейп картинку, лучше если это будет кадр из видео, чтобы потом было удобно и наглядно редактировать содержимое zero-блока:

Задаем этому шейпу имя класса «video_zero_block». (Как это сделать, можно прочитать в блоге Тильды: https://blog.tilda.cc/tpost/68634fmbc1-tildaupdates-css-klass-dlya-elementov-v )

Далее добавьте на страницу с меню в блок T123 следующий код, поменяв только ссылку на видеофайл:


<!--Видео на сайт-->
<video preload="auto" class="video_source_block" playsinline autoplay loop muted>
    <!--Укажите здесь свою ссылку на видеофайл-->
    <source src="https://khudova.ru/swiftdesign/video/opening-a-laptop.mp4">
</video>

<script>
    $(document).ready(function(){
    $('.video_source_block').appendTo('.video_zero_block div');
});
</script>

<style>
.video_zero_block {
  overflow: hidden; /*Сотрите это свойство, если у вас включен автоскейл*/
}
.video_zero_block .tn-atom {
    background-image: none !important;
    background-color: transparent !important;
}
.video_zero_block video {
    object-fit: cover;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px; /*Радиус скругления углов у видео*/
}
</style>

Опубликуйте страницу и наслаждайтесь результатом:

UPD (18.12.2022):

Код был обновлен и теперь он подходит для шейпов с анимацией. Таким образом можно заанимировать шейп (как базовой анимацией, так и sbs), и эта анимация будет работать на видео внутри шейпа :)

Заключение

Как видите, самое сложное в этой инструкции — это получить ссылку на видео :)
Если у вас есть вопросы по данной статье, напишите об этом в комментариях под статьей или в форме обратной связи. Я обязательно вам отвечу.

Понравилась статья?

Для статьи использованы материалы

Видео с бесплатного стока Coverr