Фоновое видео
Фоновое видео
Главная /
Библиотека /
Модификация позволяет поставить фоновое видео в Zero-блоке.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Фоновое видео с автоплеем
<!--Фоновое видео
https://mt-webdesign.ru/video-background-->
<video style="width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left:0;" preload="auto" muted playsinline autoplay="autoplay" loop="loop">
<source src="https://www.matilda-design.ru/matilda-video/video-in.mp4" type="video/mp4">
</video>В коде заменяем путь до вашего файла. Не забудьте указать правильный формат (mp4)
Шаг 2
Фоновое видео с автоплеем (Google диск)
Загружаем видео на ваш Google диск. Не забудьте открыть доступ к файлу
Шаг 1
Копируем ссылку и переходим на сервис Votix (ссылка ниже).
Ваша первоначальная ссылка будет выглядить так: https://drive.google.com/file/d/1xqRflZgyEvSNsqRUc0A8-MyAzSd6Cits/view
После генерацации: https://drive.google.com/uc?export=download&confirm=no_antivirus&id=1xqRflZgyEvSNsqRUc0A8-MyAzSd6Cits
Ваша первоначальная ссылка будет выглядить так: https://drive.google.com/file/d/1xqRflZgyEvSNsqRUc0A8-MyAzSd6Cits/view
После генерацации: https://drive.google.com/uc?export=download&confirm=no_antivirus&id=1xqRflZgyEvSNsqRUc0A8-MyAzSd6Cits
Шаг 2
Сгенерировать ссылку
Проделываем все тоже самое, что и варианте выше, но заменяем ссылку на сгенерированную
Шаг 3
Фоновое видео с триггером для запуска по нажатию
<!--Фоновое видео
https://mt-webdesign.ru/video-background-->
<video class='video-play-1' poster='https://static.tildacdn.com/tild3339-3333-4836-b062-343566343435/Mask_group.jpg' style="width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left:0;" preload="auto" muted playsinline loop="loop">
<source src="https://www.matilda-design.ru/matilda-video/video-in.mp4" type="video/mp4">
</video>В коде заменяем пути до видео и фонового изображения
Шаг 2
Создаём шейп для кнопки play-pause. Вешаем класс на него play-1 и загружаем ваше изображение
Шаг 3
Сверху создаём еще шейп с прозрачным фоном, он будет служить триггером для запуска и добавляем класс video-play-trigger-1
Шаг 4
<style>
.video-play-trigger-1 {
cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
var playTrigger1 = $('.video-play-trigger-1');
var playDiv1 = $('.play-1 .tn-atom');
var playVideo1 = $('.video-play-1')[0];
playTrigger1.on('click', function() {
if (playVideo1.paused) {
playDiv1.css('background-image', 'url("")');
playVideo1.play();
} else {
playDiv1.css('background-image', 'url("https://static.tildacdn.com/tild3534-3464-4537-a565-333639373136/pause.svg")');
playVideo1.pause();
}
});
$(playVideo1).on('play', function() {
playDiv1.hide();
});
$(playVideo1).on('pause', function() {
playDiv1.show();
});
});
</script>В коде заменяем путь до изображения, когда видео будет на паузе
Шаг 6
Фоновое видео с триггером для запуска по наведению
<!--Фоновое видео
https://mt-webdesign.ru/video-background-->
<video class='video-play-hover-1' poster='https://static.tildacdn.com/tild3339-3333-4836-b062-343566343435/Mask_group.jpg' style="width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left:0;" preload="auto" muted playsinline loop="loop">
<source src="https://www.matilda-design.ru/matilda-video/video-in.mp4" type="video/mp4">
</video>В коде заменяем пути до видео и фонового изображения
Шаг 2
Сверху создаём еще шейп с прозрачным фоном, он будет служить триггером для запуска и добавляем класс video-play-hover-trigger-1
Шаг 3
<style>
.video-play-hover-trigger-1 {
cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$('.video-play-hover-trigger-1').hover(
function() {
$('.video-play-hover-1')[0].play();
},
function() {
$('.video-play-hover-1')[0].pause();
}
);
});
</script>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
