code-snippets/tilda/video/responsive-background-video.html at main · baslie/code-snippets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
Адаптивное фоновое видео для Zero-блока Тильды

<!-- ********************************************************************** -->
<!-- Адаптивное фоновое видео для Zero-блока Тильды                         -->
<!-- ********************************************************************** -->
<!-- Заполняет 100% ширины и высоты родительского блока с возможностью      -->
<!-- указать свои ссылки на видео и превью.                                 -->
<!-- ********************************************************************** -->
<script>
    // Замените на URL вашего видео
    const videoSource = 'https://example.com/path/to/your/video.mp4';
    // Замените на URL вашего превью
    const previewImage = 'https://example.com/path/to/your/preview.jpg';
</script>
<div class="uc-video-container">
    <video id="uc-player" playsinline autoplay muted loop>
        <source src="" type="video/mp4" />
    </video>
</div>
<style>
:root {
    --uc-preview-image: url('');
}

.uc-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--uc-preview-image) center center / cover no-repeat;
}

#uc-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
    // Устанавливаем источник видео
    const videoElement = document.getElementById('uc-player');
    videoElement.querySelector('source').src = videoSource;
    videoElement.load();

    // Инициализируем Plyr
    const player = new Plyr('#uc-player', {
        controls: [],
        autoplay: true,
        muted: true,
        loop: { active: true },
        clickToPlay: false,
        hideControls: true
    });

    // Запускаем видео после готовности
    player.on('ready', () => {
        player.muted = true;
        player.play();
    });

    // Устанавливаем фоновое изображение через CSS-переменную
    document.documentElement.style.setProperty('--uc-preview-image', `url('${previewImage}')`);
});
</script>