Пропорциональное уменьшение YouTube видео

Для начала возьмем любое видео из YouTube, к примеру это:

Для этого мне понадобился следующий HTML код:

<iframe   src="https://www.youtube.com/embed/rMlCciqXrb8" frameborder="0" allowfullscreen></iframe>

Далее я установил CSS стиль, который не позволит любому iframe элементу вылазить за рамки родительского элемента:

iframe {
   max-width: 100%;
}

Последним что остается сделать, так это пропорционально уменьшать высоту каждого фрейма (видео) при уменьшении размера экрана. Нам понадобиться jQuery:

// Служит для  трансформации видео
$(window).resize (function () {
  $("iframe").each(function() {
      var width = $(this).width ();
      $(this).css("height", width / 1.7777 + "px");
  });
});

Вы можете заметить, что логика здесь очень проста. Нам необходимо уменьшать фреймы только при изменении размера нашего окна. Мы выбираем каждый фрейм, но можно задать более конкретный селектор, к примеру #video-block>iframe. Дальше мы перебираем каждый такой элемент при помощи встроенной функции each. У каждого элемента мы берем его ширину и делим её на 1.7777, чтобы получить стандартную пропорцию соотношения высоты и ширины.

Стоит также отметить, что это работает не только с Youtube видео, но также с другими видео, к примеру видео Vimeo.

И да, попробуйте сами все протестировать, уменьшив размер этой страницы. Видео будет адаптироваться под новые размеры.