02 октября, 2022

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

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

Загрузить видеофайл можно в любое облачное хранилище (Google Диск, Dropbox, Яндекс Диск, Облако Mail.ru) или собственный хостинг. Я лично предпочитаю второй вариант, т.к. скорость загрузки видео будет в разы выше, и это никак не затормозит ваш сайт. Но такой способ платный, а поэтому я расскажу и про первый тоже на примере Google Диска.
Шаг 1.1. Получаем прямую ссылку на видео с Google Диска
Внимание! Данный метод прямой ссылки на видео с 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>
Опубликуйте страницу и наслаждайтесь результатом:
Шаг 3 (опционально). Модифицируем код для вставки нескольких видео на странице
Для вставки нескольких видео в шейпы на странице перепишите код следующим образом:

<!--Видео на сайт-->

<!--Повторяем эту часть кода столько раз, сколько у вас видео. В каждой части кода задайте уникальный класс, например video_source_block_1, video_source_block_2 и т.д.-->

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

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

<script>
    $(document).ready(function(){

     // Продублируйте эту строчку столько раз, сколько у вас видео. В каждой строке задайте уникальные классы видео и соответствующего ему шейпа из зеро блока
    $('.video_source_block_1').appendTo('.video_zero_block_1 div');
    $('.video_source_block_2').appendTo('.video_zero_block_2 div');
});
</script>

<style>

/*Далее перечислите везде уникальные классы шейпов через запятую*/

.video_zero_block_1, .video_zero_block_2 {
  overflow: hidden; /*Сотрите это свойство, если у вас включен автоскейл*/
}
.video_zero_block_1 .tn-atom, .video_zero_block_2 .tn-atom {
    background-image: none !important;
    background-color: transparent !important;
}
.video_zero_block_1 video, .video_zero_block_2 video {
    object-fit: cover;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px; /*Радиус скругления углов у видео*/
}
</style>
UPD (18.12.2022):
Код был обновлен и теперь он подходит для шейпов с анимацией. Таким образом можно заанимировать шейп (как базовой анимацией, так и sbs), и эта анимация будет работать на видео внутри шейпа :)
Заключение
Как видите, самое сложное в этой инструкции — это получить ссылку на видео :)
Если у вас есть вопросы по данной статье, напишите об этом в комментариях под статьей или в форме обратной связи. Я обязательно вам отвечу.
Понравилась статья?
Будьте в курсе
Подписывайтесь на мой ТГ канал
Там я пишу о разработке сайтов на Тильде, дизайне и делюсь полезными ресурсами, статьями и модификациями.
Перейти в канал
Для статьи использованы материалы
Похожие статьи

Подробная инструкция по использованию несложной модификации для создания бокового меню-гамбургера в zero-блоке с раскрытием на весь экран

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

Комментарии
Боковое меню-гамбургер в zero-блоке на Тильде
Предыдущая статья
Как сделать «прилипающий подвал» на Тильде
Следующая статья
Напишите мне
Хотите нанять меня? Или узнать больше о моей работе? Свяжитесь со мной, я буду рада ответить на все ваши вопросы или обсудить с вами наш новый проект.