Адаптивная верстка сайтов в последнее время прочно вошла в нашу жизнь. Мы стремимся все больше и больше элементов шаблона наших сайтов подчинить требованиям автоматической адаптации размеров и пропорций под различные дисплеи и мониторы устройств, с которых будут просматривать контент интернет-ресурса. Однако, не всегда удается найти удобное и простое в реализации решение. В частности, это касается плеера youtube, который сам по себе совершенно не желает изменять свои размеры под размеры окна браузера. В результате на узких дисплеях блок видео вылезает за пределы видимого поля. Некрасиво и очень неудобно. В этой статье рассматривается решение этой проблемы.

Вообще говоря, существует, как минимум, два способа сделать плавающие размеры блока плеера youtube: воспользоваться функционалом Bootstrap, или воспользоваться приведенным ниже jQuery скриптом. В различных ситуациях удобно пользоваться разными способами, но обо всем по порядку.

Bootstrap responsive embed (отзывчивый код вставки)

В bootstrap 3.3.0 резиновый блок (плеера youtube) реализуется присвоением блоку iframe класса “embed-responsive-item”. При этом сам iframe-блок оборачивается во внешний блок с классами “embed-responsive” и “embed-responsive-WbyH”, где вместо W и H -  вам необходимо указать желаемые значения пропорции блока плеера. Ниже приведен пример взятый непосредственно с сайта Bootstrap 3.3.0 (http://getbootstrap.com/components/#responsive-embed):

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
 
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Необходимо заметить, что данный функционал резинового плеера youtube доступен, по всей видимости, только с версии bootstrap 3.3.0, в версиях же ранее - такой возможности нет. Соответственно, если Вы используете более старую версию bootstrap, то по возможности обновите ее до последней. Если же возможности обновления нет, или вы вовсе не планируете использование каких-либо подобных фреймворков - то вам подойдет решение ниже.

jQuery скрипт изменения размеров блока

Внизу статьи есть ссылка на скачивание архива с примером использования данного решения.

Листинг jQuery скрипта:

(function($){
    // подготавливает массив всех плееров на странице
    // высчитывает для каждого пропорции сторон
    function getIframes () {
        videoiframes = $("iframe#youtubeimport");
        videoiframes.each(
                function () {
                    var currentIframe = $(this);
                    var H = currentIframe.height();
                    var W = currentIframe.width();
                    var aspectRatio = H / W;
                    currentIframe.data("aspectRatio", aspectRatio);
        });
    }
 
    // осуществляет пересчет и перезапись css высоты и ширины блока.
    function resizeIframe () {
        videoiframes.each(function() {
            var currentIframe = $(this);
            var newWidth = currentIframe.parent("div.responsiveyoutube").width();
            var newHeight = newWidth * currentIframe.data("aspectRatio");
            currentIframe
                    .attr("height",newHeight)
                    .attr("width",newWidth);
        });
    }
 
    var videoiframes = {};
    $(document).ready(function () {getIframes(); resizeIframe();});
    $(window).resize(function () {resizeIframe();});
 
})(jQuery);

Скрипт включается в работу при наступлении хотя бы одного из двух событий:

• .ready() - когда при загрузке полностью сформирована объектная модель документа страницы (не путать с полной загрузкой страницы);
• .resize() - когда пользователь сам изменяет размер окна браузера, например кликнув по кнопке “развернуть” в windows, или захватив указателем мыши край окна и передвинув его.

При инициализации события “ready” объект “videoiframes” заполняется ссылкам на все найденные в структуре документа плееры youtube, при этом предполагается что “iframe” блок имеет атрибут ”id” со значением “youtubeimport”. Одновременно для каждого найденного элемента высчитывается, исходя из уже указанных размеров - пропорции блока. Это значение в последствии используется в функции “resizeIframe()” для пересчета высоты блока плеера youtube. Именно эта функция вызывается сразу после заполнения объекта “videoiframes” и при изменении размеров окна, инициированном самим пользователем. Ширина блока определяется по ширине родительского элемента “div” с классом “responsiveyoutube”, в который обернут тег блока плеера. Пример html кода вставки ниже:

        <div class="responsiveyoutube">
            <iframe 
                id="youtubeimport"
                width="700" 
                height="430" 
                src="http://www.youtube.com/embed/nzCzm00GFHk" 
                frameborder="0"
                allowfullscreen>
            </iframe>
        </div>

Вся конструкция js-скрипта инкапсулирует свою область видимости, что гарантированно исключает возможность конфликта внутренних переменных с внешними, которые могут быть инициализированы в глобальной области в уже подключенных javascript-плагинах для вашей страницы.

Теперь размеры блока плеера youtube стали полностью адаптивными. Чего собственно изначально мы и желали.

Нужно отметить, что приведенный выше скрипт может быть применен не только к плееру youtube, но и к любому другому html блоку, на который вы его “нацелите”. Прицеливание выполняется указанием соответствующих селекторов вместо “iframe#youtubeimport” и “div.responsiveyoutube”. При этом логика работы останется полностью без изменений.

Ссылки для скачивания.

Здесь Вы можете скачать сопроводительные материалы к статье:

responsivevideo.zip (1Kb)

* * * * * * * * * * * *

Если информация этой статьи будет интересна и полезна Вашему кругу друзей и знакомых, то Вы можете опубликовать ссылку - тогда им проще будет ее найти. Они Вам будут благодарны:).

Комментарии к статье: