Как сделать responsive video

​

Есть много способов размещения и отображения видео на сайте. Вы можете размещать файлы видео на сервере хостинга и отображать его с помощью тега HTML5 video. Возможно, вы используете для отображения видео YouTube или Vimeo с помощью iframe. Также можно использовать сервисы Viddler или Blip.tv, которые добавляют в код объект для отображения флеш плеера. В каждой случае для отображения видео необходимо добавлять фиксированную высоту и ширину. Например так:

И вот тут начинаются проблемы. Объявление фиксированных размеров для видео является не допустимым, если вы собираетесь использовать его в резиновом или адаптивном контексте. Что делать, если родительский контейнер будет сжиматься менее, чем на 400px? В этом случае контейнер с видео не будет сжиматься и выглядеть это будет ужасно.

Итак, можно ли обойти проблему так?

Да, можно, но только в том случае, если вы используете стандартный тег video в HTML5. Важно удалить фиксированную высоту, чтобы сохранить пропорции в видео. Лучше всего это сделать через CSS, чтобы потом не беспокоиться об HTML:

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

Резиновое видео для iframe видео (YouTube, Vimeo)

Наш маленький трюк, рассмотренный выше, со 100% шириной не может при размещении видео с помощью iframe. Указывать высоту в этом случае необходимо, так как в противном случае браузеры будут использовать для iframe высоту 150px (видео скорее всего будет выглядеть обрезанным). Буквально все браузеры будут отображать iframe, canvas, embed и object с размерами 300 пикселов по ширине и 150 по высоте, если этим тегам не указать нужные размеры.

К счастью, есть несколько решений для этой ситуации. Одна из техник рассмотрена еще в 2009 году Thierry Koblentz на сайте A List Apart. В этой технике видео заключается в другой элемент, который имеет заданные пропорции, и затем видео позиционируется абсолютно в этом элементе. Этим мы достигнем резиновой ширины и нужной высоты.

 .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%;
}

Этот метод замечательный, но у него есть несколько ограничений:

• Эта техника требует дополнительной обёртки в виде .videoWrapper , поэтому просто скопировать код из YouTube и вставить его уже не получится. Пользователям, обслуживающим сайт надо иметь это ввиду.
• Если у вас уже есть видео на сайте, то вам предстоит добавлять обертки videoWrapper.
• Все видео должны иметь одинаковые пропорции. В противном случае вы увидите пустое пространство снизу или по бокам для некоторых из них. Или придётся создавать специальные классы для каждого соотношения сторон видео.

Если приведённые выше решения вас не устраивают, есть способ основанный на javascript. Представим себе: при загрузке страницы все соотношения сторон для видео будут сохранены. После этого, при изменении размера окна, видео будет заполнять всю ширину родительского контейнера с сохранением пропорций. На jQuery это выглядит так:

 // Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
 
    // The element that is fluid width
    $fluidEl = $("body");
 
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
 
  $(this)
    .data('aspectRatio', this.height / this.width)
 
    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');
 
});
 
// When the window is resized
$(window).resize(function() {
 
  var newWidth = $fluidEl.width();
 
  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {
 
    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));
 
  });
 
// Kick off one resize to fix all videos on page load
}).resize();

Responsive видео для vimeo

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

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

Делаем резиновое видео для object и embed Video (Viddler, Blip.tv)

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

Тегам object и embed для отображения видео, как и iframe, требуется фиксированная ширина и высота.

Если вас устраивает внедрение дополнительной обёртки, то можно опять же использовать метод Thierry:

.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, то можно использовать jQuery. Код аналогичен выше рассмотренному, только для вставки требуется указать вместо iframe теги object или embed:

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

Надо отметить, что jQuery не позволяет в этом случае использовать метод .data( ), поэтому для хранения данных о соотношении сторон необходимо использовать HTML5 data-атрибуты. Если вы не используете HTML5, то можно ввести атрибуты rel.

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