В продолжение статьи о адаптивном показе видео с видео-хостинга YouTube. Случай, когда воспроизведением ролика не требуется управлять, позволяет отказаться от использования 3rd part плагинов или YouTube API.
Пусть у нас в верстке есть контейнер:
|
1 2 3 |
<div class="video-wrapper"> <div class="video-container"></div> </div> |
Инициализация
Я использую jQuery, к которому привык, но это не обязательно.
ID ролика сохраним в переменной video_id.
|
1 2 3 |
var video_id = 'OY3u0txD9rU'; // значение querySelect для нашего контейнера var lookupContainer = '.video-wrapper'; |
Собираем url со всеми нужными флажками autoplay, loop, mute, а не нужные флажки сбрасываем — rel, controls, showinfo и т.п.
|
1 2 3 |
var url = 'https://www.youtube.com/embed/' + video_id + '?autoplay=1&loop=1&rel=0&disablekb=1&controls=0&mute=1&autohide=1&showinfo=0&wmode=transparent'; |
Создаём youtube iframe с полученной ссылкой:
|
1 2 3 |
$('.video-container').append('\ <iframe src="' + url + '" frameborder="0"\ allow="autoplay; encrypted-media" allowfullscreen></iframe>'); |
Следим за размерами видео
За размерами фрейма следит специальная функция vidRescale. Она изменяет отступы, чтобы центрировать видео и размеры, чтобы закрыть полностью «сцену», в роли которой у нас контейнер .video-container.
|
1 2 3 4 5 6 7 8 9 10 11 |
function vidRescale(lookup) { var frm = $(lookup + ' iframe'); var w = $(lookup).width() + 0, h = $(lookup).height() + 0, ratio = 16/9; if (w/h > ratio) { $(frm).css({width: w, height: w / ratio,marginTop: (h - w / ratio)/2, marginLeft: 0 }); } else { $(frm).css({width: h * ratio, height: h, marginLeft: -(h * ratio - w)/2, marginTop: 0}); } } |
Значение ratio в примере — стандартное. Как получить aspect ratio для нестандартных видео — читайте тут.
Т.к. vidRescale должна быть вызвана в определенный момент, а именно когда меняются размеры контейнера, то нужно правильно организовать её вызов. Если размеры контейнера меняются вместе с размерами окна (window), то используйте следующий код:
|
1 2 3 4 |
/* track container size */ $(window).on('load resize', function() { vidRescale(lookupContainer); }); |
Если надо отслеживать только контейнер, то пишем что то вроде следующего:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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); } } setInterval(checkContainerSize, 25); |
Стили
Добавим вспомогательные стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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; } </style> |
Пример реализации
Ну и в конце живой пример, основанный на описанной выше технике.