Skip to content

Используем видео как фон сайта

Привет, друзья. Наверняка вы уже видели на некоторых сайтах видео в качестве фона сайта и задавались вопросом: «А как такое можно сделать?». Основная проблема здесь в том, как заставить видео заполнить весь экран. Но эта проблема решаема. Прочитайте данный урок и с легкостью используйте видео как фон своего сайта.

HTML&CSS

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

<div id="container">
    <video autoplay="" loop="" muted="">
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
    </video>
    <div class="content">
    
    </div>
</div>

Далее, немного CSS, чтобы расположить контент прямо над видео.

#container {
 position: relative;
 overflow: hidden;
}

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

Великолепно! Теперь все, что осталось сделать — это заставить видео заполнить полностью окно браузера. Для этого нам понадобиться немного JavaScript-магии.

JavaScript

Чтобы видео застилало весь фон, нам нужно провести сравнение соотношения сторон окна браузера и соотношения сторон видео. Тогда мы можем умножить ширину видео. По этому расчету видео будет всегда заполнять экран.

Не забудьте подключить jQuery!

$(function() {

 // IE detect
 function iedetect(v) {

     var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');
 return r.test(navigator.userAgent);

 }

 // For mobile screens, just show an image called 'poster.jpg'. Mobile
 // screens don't support autoplaying videos, or for IE.
 if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {

 (adjSize = function() { // Create function called adjSize

 $width = $(window).width(); // Width of the screen
 $height = $(window).height(); // Height of the screen

 // Resize image accordingly
 $('#container').css({
 'background-image' : 'url(poster.jpg)', 
 'background-size' : 'cover', 
 'width' : $width+'px', 
 'height' : $height+'px'
 });

 // Hide video
 $('video').hide();

 })(); // Run instantly

 // Run on resize too
 $(window).resize(adjSize);
 }
 else {

 // Wait until the video meta data has loaded
 $('#container video').on('loadedmetadata', function() {

 var $width, $height, // Width and height of screen
 $vidwidth = this.videoWidth, // Width of video (actual width)
 $vidheight = this.videoHeight, // Height of video (actual height)
 $aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in

 (adjSize = function() { // Create function called adjSize

 $width = $(window).width(); // Width of the screen
 $height = $(window).height(); // Height of the screen

 $boxRatio = $width / $height; // The ratio the screen is in

 $adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size

 // Set the container to be the width and height of the screen
 $('#container').css({'width' : $width+'px', 'height' : $height+'px'}); 

 if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..
 // Set the width of the video to the screen size multiplied by $adjRatio
 $vid = $('#container video').css({'width' : $width*$adjRatio+'px'}); 
 } else {
 // Else just set the video to the width of the screen/container
 $vid = $('#container video').css({'width' : $width+'px'});
 }

 })(); // Run function immediately

 // Run function also on window resize.
 $(window).resize(adjSize);

 });
 }

});

Наш код будет всегда подгонять размеры видео под размеры окна браузера. Стоит отметить, что мобильные браузеры не поддерживают автовоспроизведение видео, а IE8 и ниже вовсе не поддерживает видео. Для пользователей зашедших на сайт с данных браузеров будет показан скриншот видео в качестве фона.

Полноэкранное видео — это взрыв на сцене веб-дизайна. Уверен, вы найдете ему применение в своих работах.

Источник: InsertHTML