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

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

9 899
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.

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

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

Комментарии
Добавить комментарий

Пока комментариев нет