Зробіть поведінку вашого 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);
Ще немає коментарів