Как создать «прилипающее» во время прокрутки страницы видео

Как создать «прилипающее» во время прокрутки страницы видео

От автора: если вы заходили последнее время на медиа сайты (сервисы стрминига, новостные сайты, Facebook и т.д.), то могли заметить один тренд, связанный с плеерами. Если прокрутить страницу вниз, плеер уменьшается в размере и прилипает к вьюпорту, а не скрывается.

Так пользователи могут смотреть видео и другой контент одновременно. В этом уроке я покажу вам, как воссоздать этот эффект. Без разглагольствований приступим к делу!

Примеры

Так как мы с вами находимся на этой странице, я подобрал парочку примеров из сети:

Как создать «прилипающее» во время прокрутки страницы видео

Entertainment Weekly прижимает видео к правому нижнему углу вьюпорта

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Как создать «прилипающее» во время прокрутки страницы видео

CNN перемещает видео в правый верхний угол

Вставка видео с YouTube

Для начала давайте создадим страницу с Youtube видео. Самое важное – видео вставляется с параметром enablejsapi=1. Этот параметр позволит взаимодействовать с роликом через Youtube Iframe API.

<div class="site-content">
<div class="container">
 <header class="content-header">
 <h1>Lorem ipsum dolor sit amet.</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minima!</p>
 
 <!-- YouTube видео -->
 <figure class="content-media content-media--video" id="featured-media">
 <iframe class="content-media__object" id="featured-video" src="https://www.youtube.com/embed/SF4aHwxHtZ0?enablejsapi=1&rel=0&showinfo=0&controls=0" frameborder="0"></iframe>
 </figure>
 
 </header>
 <!-- Основной контент  -->
 <div class="content-body">
 </div>
</div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="scripts/main.js"></script>

Заметьте, внизу страницы мы подключили три JS файла: jQuery, скрипт с Youtube Iframe API и 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 для снижения количества вызовов. Также может потребоваться настройка положения и размера видео на макете сайта на мобильном устройстве и т.д.

Откройте демо, включите видео и прокрутите страницу!

Автор: Louie Rootfield

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Юлия

    Здравствуйте!

    Пожалуйста,скажите как называется плагин,который Вы используете на своем сайте справа для рекламы партнерских продуктов и при скролинге страницы,который появляется внизу?

    Хочу установить такой плагин себе на сайт!

    Большое спасибо за статью! :)

  2. Максим

    Здравствуйте, подскажите пожалуйста как реализовать этот код если на одной странице будет находится два видео??

    Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree