Адаптивное видео

Вы уже видели, что обеспечение поддержки устаревших браузеров приводит к увеличению объема кода. То, что с тегом <video> поначалу было одной или двумя строками, в итоге превратилось в десять и более строк (и дополнительный Flash-файл) лишь для того, чтобы осчастливить устаревшие версии Internet Explorer! Что касается меня, то я обычно воздерживаюсь от применения Flash-видео в качестве резервного варианта, чтобы итоговый код занимал меньший объем памяти, однако у каждого сценария есть свои отличия.

Теперь единственная проблема с нашим прекрасным внедрением HTML5-видео заключается в том, что оно не является адаптивным. Так и есть. Мы проделали столько тяжелой работы, однако наш веб-дизайн нельзя назвать адаптивным. Взгляните На рисунке 4.7 и постарайтесь всеми силами сдержать слезы.

К счастью, для вложенного HTML5-видео эту проблему легко решить. Просто удалите из разметки все атрибуты height и width (например, удалите width="640" height="480") и добавьте такой CSS-код:

Video { max-width: 100%; height: auto; }

Несмотря на то что такой способ отлично работает с файлами, которые могут размещаться локально, он не решает проблемы с видео, вложенным в <iframe> (привет YouTube, Vimeo и др.). Приведенный далее код добавляет на нашу страницу трейлер к фильму «Успеть до полуночи» (Midnight Run) с YouTube:

<iframe width="960" height="720" src="http://www.youtube.com/embed/B1_N28DA3gY" frameborder="0" allowfullscreen></iframe>

Рисунок 4.7. При уменьшении размера области просмотра часть видео обрезается

Несмотря на CSS-правило, которое я приводил ранее, вот что получится в итоге (рисунок 4.8).

Я уверен, что Роберт Де Ниро был бы не очень рад увидеть такое! Эту проблему можно решить несколькими способами, однако самый простой из них, с которым мне доводилось сталкиваться, заключается в использовании небольшого jQuery-плагина под названием FitVids. Посмотрим, насколько просто использовать этот плагин, добавив его в код сайта And the winner isn’t.

Прежде всего нам потребуется JavaScript-библиотека jQuery. Добавим ссылку на нее в элемент <head>. В данном случае я использую версию из Content Delivery Network (CDN).

<script src="Https://ajax. googleapis.com/ajax/libs/jquery/1.6.4/ jquery. min. js"></script>

Скачайте плагин FitVids с сайта http://fitvidsjs.com/ (дополнительную информацию о нем можно найти по адресу http://daverupert.com/2011/09/responsive-video-Embeds-with-fitvids/).

Видео по-прежнему обрезается.

Теперь сохраните JavaScript-файл FitVids в подходящей папке (свою я творчески назвал js), а затем добавьте ссылку на него в элемент <head>:

<script src="js/fitvids. js"></script>

И наконец, остается лишь использовать jQuery и нацелиться на определенный элемент, содержащий наше видео с YouTube. В данном примере я добавил трейлер к фильму «Успеть до полуночи» (Midnight Run) с YouTube в элемент <div> с идентификатором #content:

<script>

$(document).ready(function(){

// Нацельтесь на свой. container, .wrapper, .post и т. д. $(“#content").fitVids();

});

</script>

Вот и все. Благодаря jQuery-плагину FitVids теперь у нас имеется полностью адаптивное видео с YouTube (рисунок 4.9).

Уф! Все исправлено. Это должно поспособствовать сохранению моих дружеских отношений с Робертом!

Наша страница с видео стала адаптивной.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *