Всем привет! В сегодняшней заметке речь пойдет об инструменте, который выполняет пропорциональный ресайз видео на странице сайта, сконструированной под мобильные устройства. Код видео вставляется с уже заданной шириной и высотой, оно гармонично смотрится до тех пор, пока ширина видео не будет больше ширины устройства, тогда видео обрезается. Это выглядит примерно так:

Для автоматического ресайза видео, написал скрипт, код работает следующим образом, он ищет внутри тега код видео и при изменении размера экрана, автоматически пропорционально пересчитывает ширину и высоту и в результате получаем оптимизированные размеры под устройство, с которого просматривают страницу.

Скрипт:

$(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 указываем только минимальную высоту, ширина будет меняться пропорционально.

На это все, удачи в адаптивной верстке!