Відео на фоні з CoverVid

Зробіть поведінку вашого HTML5 відео як у фонового зображення з простим JQuery розширенням CoverVid. Дуже просте у використанні, просто виконайте наступні кілька кроків...

Киньте_ covervid.min.js_ файл до вашої javascript теки та завантажте його після jQuery.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="covervid.min.js"></script>

Важливо відзначити, що цільове відео буде використовувати батьківський елемент для визначення масштабу. Маючи це на увазі, ми створимо просту розмітку та додамо деякі базові стилі до батьківського елемента, та обгортки.

    <div class="covervid-wrapper">
        <video autoplay="" class="covervid-video" loop="" poster="img/video-fallback.png">
            <source src="videos/clouds.webm" type="video/webm">
            <source src="videos/clouds.mp4" type="video/mp4">
        </video>
    </div>
    
    .covervid-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

Тепер, ми просто викликаємо coverVid() функцію на елементі відео, використовуючи рідні розміри відео.

    $('.covervid-video').coverVid(1920, 1080);

Демо