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

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

Передача параметров при создании viewModel

Февраль 17, 2025 г.

Распространенная задача - при создании viewModel требуется передать параметры из активити или фрагмента. ViewModel используется для хранения состояния данных экрана, отвечая только за т.н. бизнес логику. Жизненный цикл этого компонента не зависит ...

Читать

Подключаем yandex cloud как s3 в Drupal

Апрель 3, 2025 г.

Облачные файловые хранилища Яндекса можно подключить и использовать в вашем проекте на drupal через модуль s3fs. А именно, хранить там т.н. юзерфайлы, ...

Читать

Отправить PUT запрос через cUrl в PHP

Май 19, 2021 г.

Делюсь примером кода, который отправляет PUT запрос через CURL. Все работает точно также как для POST запроса, с небольшими отличиями в настройках: [crayon-6981660bbdca4284968520/] Надеюсь, этот пример сэкономит вам время :)

Читать

Екатеринбург - Нью Велосюки

Июль 26, 2012 г.

До хоть какого то уровня статуса "вело-сити" нашему городу далеко. Хотя совсем недавно у нас появилась (!внимание) велодорожка в центре города. По тротуару ...

Читать

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

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

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