Всем привет! В сегодняшней заметке речь пойдет об инструменте, который выполняет пропорциональный ресайз видео на странице сайта, сконструированной под мобильные устройства. Код видео вставляется с уже заданной шириной и высотой, оно гармонично смотрится до тех пор, пока ширина видео не будет больше ширины устройства, тогда видео обрезается. Это выглядит примерно так:
Для автоматического ресайза видео, написал скрипт, код работает следующим образом, он ищет внутри тега код видео и при изменении размера экрана, автоматически пропорционально пересчитывает ширину и высоту и в результате получаем оптимизированные размеры под устройство, с которого просматривают страницу.
Скрипт:
$(function() { var $allVideos = $("iframe[src^='http://player.vimeo.com'],iframe[src^='//player.vimeo.com'], iframe[src^='http://www.youtube.com'], iframe[src^='//www.youtube.com'],object, embed"), $fluidEl = $("figure"); $allVideos.each(function() { $(this) // jQuery .data does not work on object/embed elements .attr('data-aspectRatio', this.height / this.width) .removeAttr('height') .removeAttr('width'); }); $(window).resize(function() { var newWidth = $fluidEl.width(); $allVideos.each(function() { var $el = $(this); $el .width(newWidth) .height(newWidth * $el.attr('data-aspectRatio')); }); }).resize(); });
Вот такой код в 20 строчек решает проблему с отображением видеороликов на мобильных устройствах. Пример можно увидеть в прошлой статье. Для работы скрипта должен быть подключен JQuery.
Если кому-то не подходит вариант со скриптом, можно попробовать реализовать ресайз через стили, используя медиа запросы, которые позволяют задать стили исходя из размеров устройства. Ниже приведу пример кода:
/************************************************************************************ smaller than 980 *************************************************************************************/ @media screen and (max-width: 980px) { /* embedded videos */ .video embed, .video object, .video iframe { width: 100%; height: auto; min-height: 300px; } } /************************************************************************************ smaller than 650 *************************************************************************************/ @media screen and (max-width: 650px) { /* embedded videos */ .video embed, .video object, .video iframe { min-height: 250px; } }
Для устройств, с шириной меньше 980px, ширина видео 100%, высота автоматическая, что бы размеры были пропорциональными и указана минимальная высота, что бы был придел минимальной высоты. Для устройств с шириной меньше 650px указываем только минимальную высоту, ширина будет меняться пропорционально.
На это все, удачи в адаптивной верстке!
Наименование | Размер | Скачив. | ||
---|---|---|---|---|
Скрипт автоматеского ресайзинга видео на сайте | 0 KiB | 163 | Скачать |