модификация

Как сделать видеофон в ZeroBlock на Tilda

Вставляем видеофон в ZeroBlock с автовоспроизведением и отключенным звуком

Как это сделано?

1. Создаём ZeroBlock с высотой: Window Container Height - 100%
2. Создаём HTML, (в настройках ставим: Window Container: centre, centre, Позиция: высота: 100% и ширина: 100%)
3. Добавляем код внутрь этого HTML и прописываем в коде свою ссылку с Dropbox
4. Заходим на Dropbox и туда закидываем своё видео, получаем ссылку и вставляем её в свой код

В коде замените:
Вместо этой ссылки: https://dl.dropboxusercontent.com/s/wq3tgvyoytp8kpw/Tesla%20Model%203.%20Презентация.mp4?dl=0 ставьте свою (которую получили на Dropbox или любого другого сервиса на ваш выбор). Я рекомендую менять только часть ссылки (если ссылка с dropbox, то вот эту часть: /wq3tgvyoytp8kpw/Tesla%20Model%203.%20Презентация.mp4?dl=0), если с другого сервиса, то меняем ссылку полностью.

Скопировать

Скопированно


<div class="videoBackground">
    <video preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/wq3tgvyoytp8kpw/Tesla%20Model%203.%20Презентация.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>

Что-то не получается?

Спросите у меня в чате ниже, я с удовольствием вам помогу!