Адаптивная верстка Youtube видео ролика как фона произвольного контейнера

Это продолжение статьи о адаптивном показе видео из разных источников. Здесь я расскажу о youtube роликах. Для управления роликом буду использовать jQuery плагин jquery.mb.YTPlayer.

У нас есть много вариантов как выполнить задачу:

использовать плагин, который я подобрал;
использовать API YouTube — доки вот тут:
https://developers.google.com/youtube/iframe_api_reference;
вообще не пользоваться плагинами и API.

Нужно понять, что нам даёт каждый вариант. Плагин или API позволит нам выполнить функции вроде остановки / запуска видео. Если этого не требуется, то можно обойтись без плагинов. Вариант без использования плагина вот тут.

Итак, для начала подключим jquery.mb.YTPlayer и jQuery. Стили плагина можно не инклюдить, они нам не нужны.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="/jquery.mb.YTPlayer.js"></script>

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> для мобильных устройств пригодится вот это (я думаю здесь комментарии не нужны):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

Пусть у нас в верстке есть контейнер:

<div class="video-wrapper">
  <div class="video-container"></div>
</div>

</div>

Инициализация

ID ролика сохраним в переменной video_id.

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';

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, и отключаем некоторые элементы, которые позволяет отключить плагин.

(function () {
  $('.video-container').YTPlayer({
    videoURL: url,
    playOnlyIfVisible: true,
    containment: "self",
    autoPlay: true,
    mute: true,
    loop: true,
    optimizeDisplay: true,
    showYTLogo: false,
    gaTrack: false,
    showControls: false,
  });
}) ();

(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мя контейнерами.

/* 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 });
  }
}

/* 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), то используйте код

/* track container size */
$(window).on('load resize', function() {
  vidRescale(lookupContainer);
});

/* track container size */

$(window).on('load resize', function() {

vidRescale(lookupContainer);

});

Если же надо отслеживать resize контейнера отдельно, то приходится писать что то вроде следующего:

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);

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. Но бывают ролики с совершенно кастомным отношением сторон, как выудить значение ? Читайте тут.

Управление роликом

Плагин я подключал только для того, чтобы иметь возможность управлять воспроизведением ролика.

// Получим DOM объект, к которому привязан плагин
var elm = $('.video-container');
// вызываем функции (читайте доки и о других методах плагина)
// остановить воспроизведение / сбросить время в ноль:
elm.YTPStop();
// запустить воспроизведение
elm.YTPPlay();

// Получим DOM объект, к которому привязан плагин

var elm = $('.video-container');

// вызываем функции (читайте доки и о других методах плагина)

// остановить воспроизведение / сбросить время в ноль:

elm.YTPStop();

// запустить воспроизведение

elm.YTPPlay();

Стили

Осталось только взглянуть на стили.

<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>

<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>

Часть стилей борется с последствиями использования плагина, часть нужна для выравнивания по центру.

А вот живой пример на основе предложенного кода (на десктопе можно менять размеры контейнера, потянув за уголок справа-внизу).

Написать комментарий

Данная запись опубликована в 10.10.2018 14:35 и размещена в рубрике На первой полосе. Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

Получить список типов товаров в Drupal Commerce

Июль 23, 2023 г.

В терминологии Drupal, типы товаров это - бандлы (bundle) сущности commerce_product. Получить их список можно вот так: [crayon-6895c24d6ddf8004044860/] Как результат, в $product_types вы получите массив типов товаров, где ключом является ...

Читать

Задача о подсчете количества путей в словаре

Апрель 16, 2023 г.

Разбираем задачу № 1639 Number of Ways to Form a Target String Given a Dictionary c leetcode.com. Дан словарь, где слова имеют одинаковую длину - words. Также дано дополнительно слово - target, которое нужно составить из словарных слов по следующим правилам: ...

Читать

Призрак в доспехах

Апрель 3, 2017 г.

Фильм является ремейком одноименного аниме 1991 года. Его я посмотрел перед тем как идти на фильм. Ряд сцен в фильме действительно очень точно повторяют ...

Читать

Работаем с датами широкого диапазона в PHP

Январь 28, 2016 г.

Многие не задумываются при работе в PHP со стандартными функциями даты-времени о диапазоне их применимости (date(), time(), mktime() и т.п). Так мы можем скоро столкнуться с проблемой, подобная которой случалась уже раньше - "ошибка 2000". Я прекрасно ...

Читать

Комментарии к «Адаптивная верстка Youtube видео ролика как фона произвольного контейнера»

Понравилась статья? Есть вопросы? - пишите в комментариях.

Имя (обязательно)	Е-майл (не будет опубликован на сайте, обязательно для заполнения)
Комментарий: