«. . . ежик резиновый с дырочкой в правом боку» или адаптивный дизайн видео

В мире адаптивного дизайна и «резиновых» макетов единственный тип медиа-данных стоит на пути совершенной гармонии — видео. Есть масса способов показать видео на своём сайте. Можно самостоятельно хостить видео и предоставлять его с помощью HTML-тега video. Можно использовать YouTube или Vimeo, которые предоставляют код iframe для показа видео. Можно использовать Viddler или Blip.tv и теги object/embed для флеш-плеера. И во всех этих сценариях обязательно объявляются статические ширина и высота.

<video width="400" height="300"... 

<iframe width="400" height="300"... 

<object width="400" height="300"...
<embed width="400" height="300"... 

 
Великолепно. Назначение неизменной ширины не есть хорошая идея для «резиновых» макетов. Что будет, если родительский контейнер видео сжимается и становится уже, чем объявленные 400px? Вот что будет — «титька» и, сами видите, как это смешно и неловко.

 
Так, что-же делать и, как можно проще?

<video width="100%"... 

 
Конечно, так можно делать. Если вы используете стандартный HTML5 video для размещения видео по ширине контейнера. Очень важно избавиться от явного объявление высоты, но так, чтобы сохранялись пропорции рамки видео при адаптивном изменении размеров при заполнении пустого пространства (в отличие от изображений, по-факту утверждаю, что соотношение сторон video не зависит от размера элемента). Это делается с помощью CSS (и не надо беспокоится об HTML) следующим образом:

video {
  width: 100%    !important;
  height: auto   !important;
}

 

Видео в < iframe > (YouTube, Vimeo и т.д.)

Наш маленький трюк со 100% шириной не сработает в случае с iframe. Здесь обязательно требуется объявление высоты, а в противном случае браузер для iframe назначит статическую высоту в 150px¹, которая слишком мала для большинства видео, превращая его в R&E (Ridiculous and Embarrassing, англ., Смешное и постыдное).

 
Здесь, к счастью, есть несколько возможных решений. Одно из них было впервые предложено Thierry Koblentz (Тьерри Кобленц) и представлено на A List Apart в 2009 году: Creating Intrinsic Ratios for Video. С помощью этого метода вы заключаете видео в другой элемент (обёртку) с характеристическим соотношением сторон и абсолютным расположением видеозаписи в его пределах. При задании «резиновой» ширины можно рассчитывать на разумную высоту.

<div class="videoWrapper">;
     ;
     <iframe width="800" height="450" src="https://www.youtube.com/embed/fGI6jhRViZ8" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 

 

Но, . . . метод наследования пропорций не предназначен для обычных пользователей и т.д.

Вышеприведённая методика удивительна, но у неё есть несколько ограничений:

1. Требуется обертка видео-элемента, что не достигается простым копированием кода для вставки с YouTube. Пользователи должны быть немного более продвинутыми.
2. Если у вас есть устаревший контент, то для переделки макета в «резиновый» необходима корректировка HTML-кода всех старых видео.
3. Для всех видео соотношение сторон должно быть одинаковым. В противном случае необходимо каждый раз создавать свои пропорции. Или необходим набор инструментов и классов с различными именами, которые можно применять в каждом отдельном случае, что приводит к дополнительным осложнениям.

Если что-то из перечисленного относится к вам, то можно рассмотреть решение на JavaScript. Только представьте себе: при загрузке страницы загружает все видео со своими соотношениями сторон. Всякий раз при изменении размеров окна размеры всех видео изменяются, полностью используя доступную ширину, соблюдая пропорции. Используем библиотеку JQuery, где это выглядит следующим образом:

// Найдём все видео с YouTube
var $allVideos = $("iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Найдем первоначальные пропорции видео и сохраним их для figure
$allVideos.each(function() {

  $(this)
   .data('aspectRatio', this.height / this.width)

    // удаляем жесткий код width/height
   .removeAttr('height')
   .removeAttr('width');

});

// При изменении размеров окна
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Изменяем размеры для всех видео с необходимыми пропорциями
  $allVideos.each(function() {

    var $el = $(this);
    $el
     .width(newWidth)
     .height(newWidth * $el.data('aspectRatio'));

  });

// Стартуем для изменения размеров всех видео на загружаемой странице
}).resize();

Добавление из Vimeo

Для Vimeo, использующее плавающие фреймы, будем работать так-же, как и с видео на YouTube. HTML/CSS не требует никаких изменений, а в коде под Jquery необходимо исправить всего одну первую строку:
 

var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),

 

Object/Embed Видео (Viddler, Blip.tv и т.д.)

Некоторые самопальные видео размещаются на обменниках, таких как Viddler и Blip.tv, где используется старая школа с тегами object и embed. До недавнего времени так же было и на YouTube. Это старая школа и сейчас её нельзя считать стандартной, однако, этот метод очень широко используется, потому как, он просто работает.

Вставка object/embed страдает той же самой проблемой, что и плавающие фреймы, где требуется ширина и высота, что приводит к R&E результатам.

Для получения чистого HTML/CSS мы можем еще раз взглянуть на решение Тьерри, где все в порядке с добавлением дополнительного HTML для сохранения соотношения сторон.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper object,
.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 

Если мы не хотим возиться с дополнительными HTML и CSS-обёртками, то могли бы снова положиться на JavaScript. Наш сценарий в значительной степени может оставаться тем же самым, за исключением того, что мы будем искать object и embed, встраиваемых элементов, а не video или iframe элементы.
 

var $allVideos = $("object, embed"),

 
И важно отметить: Jquery не позволяют использовать функцию .data() для этих типов элементов, поэтому мы должны использовать атрибут data-aspectRatio HTML5² для хранения и извлечения наших данных о пропорциях сторон.

$(this)
  .attr('data-aspectRatio', this.height / this.width)

  ...

$el
  .width(newWidth)
  .height(newWidth * $el.attr('data-aspectRatio'));

Подведём итоги и соберём все вместе

Допустим, мы вынуждены, имея массу старого контента, включающего видео всех типов и моделей, перепроектировать свой сайт под новый «резиновый» макет. Наиболее эффективным способом будет объединение всего того, что вы узнали в этой статье и использовании этих методов совместно. Посмотрите демо-страницу с полным набором описанных методов размещения видео.

Оригинальные материалы этой статьи (англ.) и все демо доступны на GitHub.

---

¹ Буквально во всех браузерах размеры элементов с тегами iframe, canvas, embed и object приводятся к 300х150 px, если не объявлено иное. Даже если ничего нет в таблице стилей User Agent.

² Вы можете злоупотреблять атрибутом rel или чем-то похожим, если не используете HTML5.

Источник вдохновения: Fluid Width Video