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

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

Без элементов управления с автоматическим воспроизведением на мобильных устройствах
Просто код и никакой магии
Предупреждение. На iPhone в режиме экономии энергии видео воспроизводиться автоматически не будут.
Рекомендуемый код для фоного видео
Вы сами контролируете размеры видео
<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>
Код для видео, которое шире или больше контейнера
Например, видео 16:9, а его контейнер 1:1 на мобильном
<style>
.tn-elem__2946290291616420206251 > div {
  position: relative;
  overflow: hidden;
}

.tn-elem__2946290291616420206251 > div > video {
  object-fit: cover;
  width:100%;
  height: 100%;
  position: absolute;
}
</style>

<video preload="auto" playsinline autoplay loop muted> 
    <source src="http://zakazpapok.ru/AsiaCase720.mp4" type="video/mp4">
</video>
Вместо .tn-elem__2946290291616420206251 укажите класс своего HTML-элемента. Задать произвольный класс элементу в Zero блоке можно с помощью контекстного меню (вызывается правой кнопкой мыши по элементу) и нажать «Add CSS Class Name».
Фоновое видео пропорционально ширине и высоте экрана устройства
Предупреждение. На смартфоне видео будет прыгать при скрытии адресной строки и панели снизу (где кнопки). Лучше использовать 1-й вариант кода.
<div class="videoBackground">
    <video 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(function() {
  var width = $(window).width();
  var height = $(window).height();
  $(".videoBackground")
    .width(width)
    .height(height);
});

$(window).resize(t_throttle(function() {
  var width = $(window).width();
  var height = $(window).height();
  $(".videoBackground")
    .width(width)
    .height(height);
}));
</script>

<style>
.videoBackground > video {
  object-fit: cover;
  background-size: cover;
  width: 100%;
  height: 100%
}
</style>
Фоновое видео на всю страницу в Тильде
Предупреждение. На смартфоне видео будет прыгать при скрытии адресной строки и панели снизу (где кнопки). Лучше использовать 1-й вариант кода.
<div class="videoBackground">
    <video 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(function() {
  var width = $(window).width();
  var height = $(window).height();
  $(".videoBackground")
    .width(width)
    .height(height);
});

$(window).resize(t_throttle(function() {
  var width = $(window).width();
  var height = $(window).height();
  $(".videoBackground")
    .width(width)
    .height(height);
}));
</script>

<style>
.videoBackground > video {
  object-fit: cover;
  background-size: cover;
  width: 100%;
  height: 100%
}
</style>
Прямая ссылка на видео с помощью сервиса 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%
Ограничения у Дропбокс
Каждое открытие страницы с фоновым видео Dropbox фиксирует как скачивание видео. На бесплатном тарифе ограничение 100 000 загрузок в день. Чтобы видео не перестало показываться на фоне, необходимо приобрести любой тариф.
Слишком много запросов. К сожалению, пока эта ссылка автоматически отключилась. Подробнее об ограничениях на объем трафика.
Текст на картинке: «Слишком много запросов. К сожалению, пока эта ссылка автоматически отключилась. Подробнее об ограничениях на объем трафика.».
Жду ваш честный фидбэк ;)