Відео на фоні з 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 class="covervid-video" autoplay 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);

Демо