Это продолжение статьи о адаптивном показе видео из разных источников. Здесь я расскажу о youtube роликах. Для управления роликом буду использовать jQuery плагин jquery.mb.YTPlayer.
У нас есть много вариантов как выполнить задачу:
- использовать плагин, который я подобрал;
- использовать API YouTube — доки вот тут:
https://developers.google.com/youtube/iframe_api_reference; - вообще не пользоваться плагинами и API.
Нужно понять, что нам даёт каждый вариант. Плагин или API позволит нам выполнить функции вроде остановки / запуска видео. Если этого не требуется, то можно обойтись без плагинов. Вариант без использования плагина вот тут.
Итак, для начала подключим jquery.mb.YTPlayer и jQuery. Стили плагина можно не инклюдить, они нам не нужны.
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="/jquery.mb.YTPlayer.js"></script> |
В секции <head> для мобильных устройств пригодится вот это (я думаю здесь комментарии не нужны):
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Пусть у нас в верстке есть контейнер:
|
1 2 3 |
<div class="video-wrapper"> <div class="video-container"></div> </div> |
Инициализация
ID ролика сохраним в переменной video_id.
|
1 2 3 4 5 6 7 8 9 10 |
var video_id = 'OY3u0txD9rU'; // соберем урл, добавим параметры // вроде отключения не нужных элементов var url = 'https://www.youtube.com/watch?v=' + video_id + '&rel=0&disablekb=1&controls=0&autohide=1&showinfo=0&wmode=transparent'; // querySelect для нашего контейнера var lookupContainer = '.video-wrapper'; |
Далее идет кусочек кода — инициализация плагина. Обратите внимание на параметры — мы отключаем звук — mute, зацикливаем видео — loop, и отключаем некоторые элементы, которые позволяет отключить плагин.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(function () { $('.video-container').YTPlayer({ videoURL: url, playOnlyIfVisible: true, containment: "self", autoPlay: true, mute: true, loop: true, optimizeDisplay: true, showYTLogo: false, gaTrack: false, showControls: false, }); }) (); |
Адаптируем размеры видео
Специальная функция для обновления размеров сцены и фрейма — vidRescale. Так как плагин добавляет свою разметку, то приходится следить за 2мя контейнерами.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* resize video to fit into container */ function vidRescale(lookup) { var view = $(lookup + ' .inline-YTPlayer'); var frm = $(lookup + ' iframe'); var w = $(lookup).width() + 0, h = $(lookup).height() + 0, ratio = 16/9; // рассчитываем новые размеры и смещение фрейма if (w/h > ratio) { $(view).css({width: w, height: w / ratio, marginTop: (h - w / ratio)/2, marginLeft: 0 }); $(frm).css({width: w, height: w / ratio}); } else { $(view).css({width: h * ratio, height: h, marginLeft: -(h * ratio - w)/2, marginTop: 0 }); $(frm).css({width: h * ratio, height: h }); } } |
Эту функцию (vidRescale) надо вызывать в момент изменения размеров контейнера. Если размеры контейнера меняются вместе с размерами окна (window), то используйте код
|
1 2 3 4 |
/* track container size */ $(window).on('load resize', function() { vidRescale(lookupContainer); }); |
Если же надо отслеживать resize контейнера отдельно, то приходится писать что то вроде следующего:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function checkContainerSize() { var CNT = $(lookupContainer); var w = $(CNT).width(); var h = $(CNT).height(); if ($(CNT).attr('data-width') != w || $(CNT).attr('data-height') != h) { vidRescale(lookupContainer); $(CNT).attr('data-width', w); $(CNT).attr('data-height', h); } } // с интревалом можно поиграть - наверное вызывать // так часто (до 100 раз в сек) не стоит setInterval(checkContainerSize, 10); |
Так мы мониторим размеры контейнера и вызываем функцию пересчета, если замечаем изменения.
Пропорции видео
Отдельно стоит упомянуть о пропорциях видео (aspect rate) для YouTube. Я использовал стандартное значение — 16/9. Но бывают ролики с совершенно кастомным отношением сторон, как выудить значение ? Читайте тут.
Управление роликом
Плагин я подключал только для того, чтобы иметь возможность управлять воспроизведением ролика.
|
1 2 3 4 5 6 7 |
// Получим DOM объект, к которому привязан плагин var elm = $('.video-container'); // вызываем функции (читайте доки и о других методах плагина) // остановить воспроизведение / сбросить время в ноль: elm.YTPStop(); // запустить воспроизведение elm.YTPPlay(); |
Стили
Осталось только взглянуть на стили.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style> .video-wrapper { width: 100%; height: 100%; overflow: hidden; position: relative; } .video-container { bottom: 0; right: 0; left: 0; top: 0; padding: 0 !important; height: 100% !important; position: absolute !important; } .video-container iframe { position: absolute; left: 0; top: 0; max-width: none; margin: 0 !important; } .video-wrapper .inline-YTPlayer { left: 0; top: 0; max-width: none !important; } </div> |
Часть стилей борется с последствиями использования плагина, часть нужна для выравнивания по центру.
А вот живой пример на основе предложенного кода (на десктопе можно менять размеры контейнера, потянув за уголок справа-внизу).