Случается, что необходимо вставить видео на сайт, но при вставке кода он имеет заданные ширину и высоту, это не есть хорошо, особенно в век гибкого содержимого. Видео может быть обёрнуто в такие теги:

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

При этом если сайт имеет, например, определённую ширину то видео будет залазить за края

Обычно мы делаем так:

<video width="100%" ...

Если имеем дело с html5 видео, то приводим все в порядок через CSS

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

И все бы ничего, но мы разобрались только с html5 видео, а как же быть с iframe?

После добавления CSS для iframe

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

Мы получим:

Как предложил еще в далеком 2009 году Thierry Koblentz свое решение данного вопроса и сделал он это так:

Оборачиваем наш iframe в div и назначим ему класс, например, .videoWrapper. Добавляем стили для класса и iframe

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" 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%;
}

Уаля, так-то лучше, получаем видео 16:9 и с нормальным height.

Но… как обычно  такого способа есть якобы «недостатки», такие как:

  • Видео должно оборачиваться в div
  • Проблемы с форматом 16:9 или 4:3

И как всегда все проблемы решаются с помощью могучего jquery

Например, наше видео обернуто в <p> добавляем следующий скрипт:

$(function() {
&nbsp;&nbsp; &nbsp;var $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed"),
&nbsp;&nbsp; &nbsp;$fluidEl = $("p");

&nbsp;&nbsp; &nbsp;$allVideos.each(function() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(this)
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;// jQuery .data does not work on object/embed elements
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.attr('data-aspectRatio', this.height / this.width)
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.removeAttr('height')
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.removeAttr('width');
&nbsp;&nbsp; &nbsp;});

&nbsp;&nbsp; &nbsp;$(window).resize(function() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var newWidth = $fluidEl.width();
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$allVideos.each(function() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var $el = $(this);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$el
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;.width(newWidth)
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;.height(newWidth * $el.attr('data-aspectRatio'));

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});
&nbsp;&nbsp; &nbsp;}).resize();
});

И получаем респонсив видео для любых тегов

количество этих тегов соответственно редактируется здесь

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

Ну вот и все!

Аватар пользователя antidenantiden
21 марта 2016658