it Новости
Пропорциональное уменьшение YouTube видео
Пропорциональное уменьшение YouTube видео
При уменьшении экрана было бы здорово пропорционально уменьшать видео из Youtube, Vimeo и прочих сетей. Как ни странно, но делается это очень просто.
Не давно столкнулся с такой проблемой, что видео из YouTube хоть и уменьшаются в размере, но делают это совсем не пропорционально. Я задумался над решением этой проблемы и создал совсем маленький код, который может пригодиться каждому у кого есть свой собственный веб сайт.
Для начала возьмем любое видео из YouTube, к примеру это:
Для этого мне понадобился следующий HTML код:
<iframe width="560" height="315" src="https://www.youtube.com/embed/rMlCciqXrb8" frameborder="0" allowfullscreen></iframe>Далее я установил CSS стиль, который не позволит любому элементу вылазить за рамки родительского элемента:
iframe {
max-width: 100%;
}Последним что остается сделать, так это пропорционально уменьшать высоту каждого фрейма (видео) при уменьшении размера экрана. Нам понадобиться :
// Служит для трансформации видео
$(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.
И да, попробуйте сами все протестировать, уменьшив размер этой страницы. Видео будет адаптироваться под новые размеры.
Больше интересных новостей
Надо ли заклеивать камеру на ноутбуке?
Лучшие продукты на Unity в 2022 году: ТОП-6
9 отличных сервисов для проверки кода
Введение в Kubernetes: что это, где применяется и зачем нужно?
Комментарии