Видео на фон в 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>

Фоновое видео на всю страницу в Тильде

<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 загрузок в день. Чтобы видео не перестало показываться на фоне, необходимо приобрести любой тариф.

Текст на картинке: «Слишком много запросов. К сожалению, пока эта ссылка автоматически отключилась. Подробнее об ограничениях на объем трафика.».

Жду ваш честный фидбэк ;)