От автора: Итак, вы видели в сети видеоролики, используемые в качестве фонов, и думали: «Как это сделать?». Основная проблема тут – добиться того, чтобы ролик закрыл весь экран. Обычно при установке видео оно масштабируется в соответствии с соотношением размеров, что значит, оно не сможет закрыть весь фон. Но не беспокойтесь, потому что я здесь для того, чтобы сопроводить вас в вашем захватывающем квесте к свободе фонового видео. Читайте, юный воин.
Срываемся в полет
Во-первых, установите div с видео, которое нужно вам в качестве фона, а затем div с контентом, куда положите все содержимое. Не забудьте сделать скриншот видео и сохранить его как jpg с названием poster.jpg. Он послужит фоном для тех пользователей, чьи браузеры не поддерживают тэг video.
|
1 2 3 4 5 6 7 8 9 |
<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, чтобы установить контент абсолютно позиционированным поверх видео:
|
1 2 3 4 5 6 7 8 9 10 |
#container { position: relative; overflow: hidden; } #container .content { position: absolute; top: 0; left: 0; } |
Отлично! Теперь все, что нужно сделать – придумать, как заставить видео растянуться во всю ширину экрана. Нам для этого придется воспользоваться магией Javascript’а:
Немного Javascript’а
Как уже говорилось, проблема в том, что соотношение размеров видеоролика сильно осложнит покрытие всего экрана. Как это исправить? Нам придется сравнить соотношение размеров окна с соотношением размеров видео. Затем можно умножить ширину видео, и путем этого расчета сделать так, что ролик будет всегда заполнять весь экран, вне зависимости от его размера. Не забудьте включить jQuery! Ваш код должен выглядеть примерно так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
$(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, так что идите туда посмотрите. Хорошего вам дня!
Автор: Johnny Simpson
Источник: //www.inserthtml.com/
Редакция: Команда webformyself.
Комментарии (8)