Видео бекраунд с автоплеем
Работает и на мобильных
Видео в окне с автоплеем
Работает и на мобильных | нет элементов управления видео
Добавляем фоновое видео в Zero Block
<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/5qym13usc9vu20z/ezgif.com-resize.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>
Добавляем видео с пропорциональным изменением размера
Все делается точно так же, только вам необходимо будет использовать скрипт ниже, а так же просто задавать размеры HTML элемента. И не забудьте поменять ссылку с своим видео.
<div id="videoCover">
<video style="object-fit: cover; background-size: cover; width: 56%; height: 59%; border-radius: 8px;" preload="auto" playsinline autoplay loop muted>
<source src="https://dl.dropboxusercontent.com/s/mflqcf5gxeae6kw/%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202020-02-11%20%D0%B2%2007.26.43.mov?dl=0" type="video/mp4">
</video>
</div>
<script>
$(document).ready(() => {
let width = $(window).width();
let height = $(window).height();
$("#videoCover")
.width(width)
.height(height);
});
$(window).resize(() => {
let width = $(window).width();
let height = $(window).height();
$("#videoCover")
.width(width)
.height(height);
});
</script>
<style>
#videoCover video, div#videoCover {
width: 100%!important;
height: auto!important;
}
</style>
Получаем прямую ссылку на ваше видео с помощью сервиса Dropbox
Вам нужно зарегистрироваться на сайте dropbox.com > затем загрузить свое видео и нажать на кнопку Поделиться
В итоге на руках у вас есть ссылка, например такая:
https://www.dropbox.com/s/5qym13usc9vu20z/vid.mp4?dl=0 нам нужно сменить в ней
с www.dropbox.com
на dl.dropboxusercontent.com
и получаем вот такую ссылку https://dl.dropboxusercontent.com/s/5qym13usc9vu20z/vid.mp4?dl=0
Все довольно просто)
https://www.dropbox.com/s/5qym13usc9vu20z/vid.mp4?dl=0 нам нужно сменить в ней
с www.dropbox.com
на dl.dropboxusercontent.com
и получаем вот такую ссылку https://dl.dropboxusercontent.com/s/5qym13usc9vu20z/vid.mp4?dl=0
Все довольно просто)
Теперь вам остается поменять эту ссылку в скрипте.
Минута микро-рекламы. Если вам для кода приходится искать ID блока, то прекрасное расширение от Ром выводит айдишки сразу в редакторе и позволяет копировать их одним щелчком, да и много еще чего умеет.
