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

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

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

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

Примеры

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

Стили

Оформить страницу вы можете на свой вкус. Нас же интересуют стили YouTube видео. Во-первых, мы добавим стили, чтобы сделать YouTube видео адаптивным. Эти стили будут сохранять пропорции контейнера .content-media—video при перемещении ролика.

Стили плавающего видео плеера

Следующие стили будут определять, как будет плавать наше видео. Будем использовать селектор .is-sticky-, который будет добавляться в плеер динамически с помощью JS. Этот селектор будет отвечать за передвижение видео на странице, уменьшение размера плеера, перемещение плеера в левую часть экрана, а также за настройку видео под пару вьюпортов.

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

Мы загрузили страницу, перед нами наше видео с YouTube и какой-то контент.

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

Пишем JavaScript

Мы дошли до интересной части урока – JS! Сейчас в нашем файл main.js следующий код:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Код выше – то же самое, что $(document).ready(). Код будет выполнен, как только загрузятся и распарсятся все элементы.

Далее задаем ряд переменных. Я добавил комментарии справа от каждой переменной с пояснениями.

Youtube Iframe API

Как уже было сказано, мы добавили JS файл с YouTube Iframe API. Это API после загрузки будет запускать функцию onYouTubeIframeAPIReady. Функция доступна на глобальном уровне. Так как наш скрипт вложен в jQuery( function( $ ) { });, то нам нужно обратиться к этой функции в объект window следующим образом:

В функции видно, как мы выбираем ID-атрибут iframe и передаем функцию onPlayerStateChange. Эта функция запустится, как только YouTube плеер будет запущен, поставлен на паузу, или воспроизведение закончится.

Функция onPlayerStateChange передает объект Event, в котором хранятся полезные данные. В нашем примере мы с помощью объекта Event .data будем получать состояние видео.

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

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

Код ниже передвигает и фиксирует видео. Видео должно плавать только во время воспроизведения. Поэтому мы сперва будем проверять iframe на наличие класса is-playing и только потом будем добавлять класс is-sticky:

Проверьте, все должно заработать!

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

Конечное демо

Заключение

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

В реальном проекте, скорее всего, придется что-то доделать тут, что-то там. Все зависит от сложности. Например, можно запускать функцию скролинга внутри функции Throttling для снижения количества вызовов. Также может потребоваться настройка положения и размера видео на макете сайта на мобильном устройстве и т.д.

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

Автор: Louie Rootfield

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

Метки:

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

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

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

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

  1. Юлия

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

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

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

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

  2. Максим

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

    Спасибо!

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

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

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

Я не робот.

Spam Protection by WP-SpamFree