Адаптивная верстка 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 и размещена в рубрике На первой полосе. Вы можете перейти в конец страницы и оставить ваш комментарий.

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

TMGMT переводит поле view_mode, объявленное плагином menu_link_extras

Июнь 17, 2024 г.

Поля, определенные модулями, не попадают в конфиг файлы сайта, и их не получается настроить привычным способом. В данном случае, требуется как то указать TMGMT модулю, что не нужно переводить поле view_mode. Чтобы предотвратить проблему, можно ...

Читать

Как получить код языка по умолчанию в Drupal

Июль 4, 2025 г.

В Drupal (начиная с версии 8 и выше, включая 10 и 11), чтобы получить код языка по умолчанию сайта (например, en, ru, fr), используйте следующий способ: [crayon-696db5ed3e2de098875172/] Подробности запроса: \Drupal::languageManager() — обращение ...

Читать

Как выполнить mysql запрос из командной строки

Январь 19, 2023 г.

Допустим, у вас запущен локально сервер, и есть база myBase с и учетка пользователя UserName/MyPass. Вы хотите выполнить запрос "SELECT * FROM TABLE" из командной строки. Команда передаётся с параметром -e, в общем виде запрос будет выглядеть так: ...

Читать

Координаты центра окружности по трем точкам

Октябрь 11, 2019 г.

Обычно эта задача решается через уравнения круга, но для программирования нужно аналитическое решение (в виде формулы). Если решать систему уравнений, ...

Читать

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

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

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