Від автора: якщо ви заходили останнім часом на медіа сайти (сервіси стрминига, новинні сайти, Facebook і т. д.), то могли помітити один тренд, пов’язаний з плеєрами. Якщо прокрутити сторінку вниз, плеєр зменшується в розмірі і прилипає до вьюпорту, а не ховається.

Так що користувачі можуть дивитися відео та інший контент одночасно. У цьому уроці я покажу вам, як відтворити цей ефект. Без просторікувань приступимо до справи!

Приклади

Так як ми з вами знаходимося на цій сторінці, я підібрав кілька прикладів з мережі:

Entertainment Weekly притискає відео до правого нижнього кута вьюпорта

CNN переміщує відео в правий верхній кут

Вставка відео з YouTube

Для початку давайте створимо сторінку з Youtube відео. Найважливіше – відео вставляється з параметром enablejsapi=1. Цей параметр дозволить взаємодіяти з роликом через Youtube Iframe API.

Зауважте, внизу сторінки ми підключили три JS файлу: jQuery, скрипт з Youtube API і Iframe main.js для нашого коду.

Стилі

Оформити сторінку ви можете на свій смак. Нас же цікавлять стилі YouTube відео. По-перше, ми додамо стилі, щоб зробити YouTube відео адаптивним. Ці стилі будуть зберігати пропорції контейнера .content-media—video при переміщенні ролика.

.content-media–video {
background-color: #ddd;
display: block;
position: relative;
padding: 0 0 56.25% 0;
}
.content-media–video iframe {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}

Стилі плаваючого відео плеєра

Наступні стилі будуть визначати, як буде плавати наше відео. Будемо використовувати селектор .is-sticky-, який буде додаватися до плеєр динамічно за допомогою JS. Цей селектор буде відповідати за пересування відео на сторінці, зменшення розміру плеєра, переміщення плеєра в ліву частину екрану, а також за налаштування відео під пару вьюпортов.

#featured-video {
transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out;
}
/** Use .sticky */
#featured-video.is-sticky {
position: fixed;
top: 15px;
left: auto;
max-width: 280px;
max-height: 158px;
width: 280px;
height: 158px;
}
@media screen and (min-width: 1120px) {
#featured-video.is-sticky {
transform: translateX(-80%);
}
}
@media screen and (min-width: 1300px) {
#featured-video.is-sticky {
transform: translateX(-115%);
}
}

Примітка: ці властивості (розмір і позиція) потрібно налаштовувати під свою аудиторію і сайт. Наприклад, якщо контент на вашому сайті пишеться справа наліво, це може вплинути на зручне розташування плеєра.

Ми завантажили сторінку, перед нами наш відео з YouTube і якийсь контент.

Пишемо JavaScript

Ми дійшли до цікавої частини уроку – JS! Зараз у нашому файл main.js наступний код:

jQuery( function( $ ) {
// Пишемо код тут.
} );

Код вище – те ж саме, що $(document).ready(). Код буде виконаний, як тільки завантажаться і распарсятся всі елементи.

Далі ставимо ряд змінних. Я додав коментарі праворуч від кожної змінної з поясненнями.

var $window = $( window ); // 1. Об’єкт Window.
var $featuredMedia = $( “#featured-media” ); // 1. Контейнер відео.
var $featuredVideo = $( “#featured-video” ); // 2. Відео з Youtube.
var player; // 3. Об’єкт Youtube плеєра.
var top = $featuredMedia.offset().top; // 4. Відступ відео зверху документа;
var offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) ); //5. offset.

Youtube Iframe API

Як вже було сказано, ми додали JS файл з YouTube Iframe API. Це API після завантаження буде запускати onYouTubeIframeAPIReady. Функція доступна на глобальному рівні. Так як наш скрипт вкладений у jQuery( function( $ ) { });, то нам потрібно звернутися до цієї функції в об’єкт window наступним чином:

window.onYouTubeIframeAPIReady = function() {
player = new YT.Player( “featured-video”, {
events: {
“onStateChange”: onPlayerStateChange
}
} );
};

У функції видно, як ми вибираємо ID-атрибут iframe і передаємо функцію onPlayerStateChange. Ця функція запускається, як тільки YouTube плеєр буде запущений, поставлений на паузу, або відтворення закінчиться.

Функція onPlayerStateChange передає об’єкт Event, в якому зберігаються корисні дані. У нашому прикладі ми з допомогою об’єкта Event .data будемо отримувати стан відео.

Стан відео, як видно нижче, представлено у вигляді чисел. 1 – відео відтворюється, 2 – пауза, 3 – відтворення завершено. При зміні стану ми будемо додавати і видаляти відповідні класи.

/**
* Запускається, коли змінюється стан Youtube відео (відтворення, пауза тощо).
*
* @param {Object} event The Youtube Object Event.
* @return {Void}
*/
function onPlayerStateChange( event ) {
var isPlay = 1 === event.data;
var isPause = 2 === event.data;
var isEnd = 0 === event.data;
if ( isPlay ) {
$featuredVideo.removeClass( “is-paused” );
$featuredVideo.toggleClass( “is-playing” );
}
if ( isPause ) {
$featuredVideo.removeClass( “is-playing” );
$featuredVideo.toggleClass( “is-paused” );
}
if ( isEnd ) {
$featuredVideo.removeClass( “is-playing”, “is-paused” );
}
}

Плаваюче і прилипающее відео

Код нижче пересуває і фіксує відео. Відео повинно плавати лише під час відтворення. Тому ми спершу будемо перевіряти iframe на наявність класу is-playing і тільки потім будемо додавати клас is-sticky:

$window
.on( “resize”, function() {
top = $featuredMedia.offset().top;
offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) );
} )
.on( “scroll”, function() {
$featuredVideo.toggleClass( “is-sticky”,
$window.scrollTop() > offset && $featuredVideo.hasClass( “is-playing” )
);
} );

Перевірте, все має запрацювати!

Кінцеве демо

Висновок

Ми закінчили! Мета уроку – дати вам фундамент, щоб ви зрозуміли, як фіксувати на відео під час прокручування сторінки, як на медіа сайтах. Ми використовували jQuery для спрощення коду, щоб він був коротше і зрозуміліше читачам.

В реальному проекті, швидше за все, доведеться щось доробити тут, що там. Все залежить від складності. Наприклад, можна запускати скролінгу всередині функції Throttling для зниження кількості викликів. Також може знадобитися налаштування положення та розміру відео на макеті сайту на мобільному пристрої і т. д.

Відкрийте демо, включіть відео і прокрутіть сторінку!