Не давно столкнулся с такой проблемой, что видео из YouTube хоть и уменьшаются в размере, но делают это совсем не пропорционально. Я задумался над решением этой проблемы и создал совсем маленький код, который может пригодиться каждому у кого есть свой собственный веб сайт.
Для начала возьмем любое видео из YouTube, к примеру это:
Далее я установил 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.
И да, попробуйте сами все протестировать, уменьшив размер этой страницы. Видео будет адаптироваться под новые размеры.