/ it Новости / Пропорциональное уменьшение YouTube видео

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

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

1 896 · 20 июля 2017 в 15:36 ·
При уменьшении экрана было бы здорово пропорционально уменьшать видео из Youtube, Vimeo и прочих сетей. Как ни странно, но делается это очень просто.
Не давно столкнулся с такой проблемой, что видео из YouTube хоть и уменьшаются в размере, но делают это совсем не пропорционально. Я задумался над решением этой проблемы и создал совсем маленький код, который может пригодиться каждому у кого есть свой собственный веб сайт.

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



Для этого мне понадобился следующий HTML код:
<iframe width="560" height="315" 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.

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

Больше интересных новостей