Підказки: застосування відео в якості фонів

2

Від автора: Отже, ви бачили в мережі відеоролики, використовувані в якості фонів, і думали: «Як це зробити?». Основна проблема тут – домогтися того, щоб ролик закрив весь екран. Зазвичай при установці відео воно масштабується відповідно до співвідношенням розмірів, що значить, воно не зможе закрити весь фон. Але не турбуйтеся, тому що я тут для того, щоб супроводжувати вас у вашому захоплюючому квесті до свободи фонового відео. Читайте, юний воїн.

Підказки: застосування відео в якості фонівПідказки: застосування відео в якості фонів

Зриваємося в політ

По-перше, встановіть div з відео, яке потрібно вам в якості фону, а потім div з контентом, куди покладіть весь вміст. Не забудьте зробити скріншот відео і зберегти його як jpg з назвою poster.jpg. Він послужить фоном для тих користувачів, чиї браузери не підтримують тег video.

Далі потрібно трохи CSS, щоб встановити контент абсолютно позиціонувати поверх відео:

#container {
position: relative;
overflow: hidden;
}
#container .content {
position: absolute;
top: 0;
left: 0;
}

Відмінно! Тепер все, що потрібно зробити – придумати, як примусити відео розтягнутися на всю ширину екрану. Для цього Нам доведеться скористатися магією Javascript’а:

Трохи Javascript’а

Як вже говорилося, проблема в тому, що співвідношення розмірів відеоролика сильно ускладнить покриття всього екрану. Як це виправити? Нам доведеться порівняти співвідношення розмірів вікна з співвідношенням розмірів відео. Потім можна помножити ширину відео, і шляхом цього розрахунку зробити так, що ролик буде завжди заповнювати весь екран, незалежно від його розміру. Не забудьте включити jQuery! Ваш код повинен виглядати приблизно так:

$(function() {
// визначення IE
function iedetect(v) {
var r = RegExp(‘msie’ + (!isNaN(v) ? (‘\\s’ + v) : «), ‘i’);
return r.test(navigator.userAgent);
}
// Для мобільних екранів просто покажіть зображення під назвою ‘poster.jpg’. Мобільні
// екрани не підтримують автопроигрывание відео, або для IE.
if(screen.width < 800 || iedetect(8) || iedetect(7) || ‘ontouchstart’ in window) {
(adjSize = function() { // Створіть функцію з назвою adjSize
$width = $(window).width(); // Ширина екрану
$height = $(window).height(); // Висота екрана
// Відповідно масштабуйте зображення
$(‘#container’).css({
‘background-image’ : ‘url(poster.jpg)’,
‘background-size’ : ‘cover’,
‘width’ : $width+’px’,
‘height’ : $height+’px’
});
// Приховайте відео
$(‘video’).hide();
})(); // Негайно запустіть
// Запустіть також масштабування
$(window).resize(adjSize);
}
else {
// Почекайте, поки завантажаться метадані відео
$(‘#container video’).on(‘loadedmetadata’, function() {
var $width, $height, // Ширина і висота екрану
$vidwidth = this.videoWidth, // Ширина відео (справжня)
$vidheight = this.videoHeight, // Висота відео (справжня)
$aspectRatio = $vidwidth / $vidheight; // Співвідношення висоти і ширини відео
(adjSize = function() { // Створіть функцію з назвою adjSize
$width = $(window).width(); // Ширина екрану
$height = $(window).height(); // Висота екрана
$boxRatio = $width / $height; // Співвідношення екрану
$adjRatio = $aspectRatio / $boxRatio; // Співвідношення відео, розділене на розмір екрану
// Встановіть контейнер на ширину і висоту екрана
$(‘#container’).css({‘width’ : $width+’px’, ‘height’ : $height+’px’});
if($boxRatio < $aspectRatio) { // Якщо співвідношення екрану менше співвідношення розмірів…
// Встановіть ширину відео розмір екрану, помножений на $adjRatio
$vid = $(‘#container video’).css({‘width’ : $width*$adjRatio+’px’});
} else {
// Ще раз встановіть відео на ширину екрана/контейнера
$vid = $(‘#container video’).css({‘width’ : $width+’px’});
}
})(); // Негайно запустити функцію
// Запустіть функцію також при зміні розміру вікна.
$(window).resize(adjSize);
});
}
});

Ось тепер відеоролик закриє весь екран при зміні його розміру користувачем! Слід запам’ятати:

Мобільні пристрої не підтримують автоматичне програвання відео, тому для них ми нічого не робимо. Замість того покажіть в якості фону зображення з назвою poster.jpg.

Те ж саме стосується IE8 і нижче! Для цих браузерів буде застосовуватися зображення poster.jpg.

Повноекранні фонові відеоролики – справжня бомба веб-дизайну, тому я впевнений, що ви знайдете їм застосування. Застосований мною матеріал взято з Vimeo’s free HD Stock Footage, так що йдіть туди подивіться. Гарного вам дня!