Канал о новостях из мира Тильды в Телеграме из первых рук →
Close
Главная страница — Как добавить видео на фон в Zero блоке в Тильде?

Видео на фон в Zero блоке

Без элементов управления с автоматическим воспроизведением на мобильных устройствах
Просто код и никакой магии
Mp4-видео на фон в Zero блоке
У такого видео будут отсутствовать элементы управления
<div>
  <video style="object-fit: cover; background-size: cover; width: 100%; height: 100%" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0" type="video/mp4">
  </video>
</div>
Фоновое видео пропорционально ширине экрана
<div id="videoBackground">
  <video style="object-fit: cover; background-size: cover; width: 100%; height: 100%" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0" type="video/mp4">
  </video>
</div>

<script>
$(document).ready(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});
</script>
Прямая ссылка на видео с помощью сервиса Dropbox
1. Зарегистрироваться на сайте https://dropbox.com
2. Загрузить видео *.mp4
3. Нажать «Поделиться» или "Share" - откроется попап
4. В самом низу попапа нажать «Создать ссылку» или "Create link"
5. Появится «Копировать ссылку» или "Copy link" - нажать
Готово!

Будет получена вот такая ссылка: https://www.dropbox.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0
1. Меняем: www.dropbox.com на dl.dropboxusercontent.com
2. Получаем: https://dl.dropboxusercontent.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0
Меняем ссылку на видео в коде:
Это картинка, не пытайтесь скопировать с неё текст ✨
Настройки для элемента HTML для обложки в начале страницы:
Если вы хотите сделать видео-обложку в Зеро блоке, то стоит поменять Container: Grid на Window и указать ширину и высоту 100%