Подгрузка YouTube плейлиста на сайт

  • 338
  • 0
  • 04 февраля 2018

Недавно задался вопросом: “Как автоматизировать процесс постинга видеозаписей на веб-сайт”.  Для этого можно воспользоваться стандартными методами, такими как вставка отдельных iframe-ов с видеороликами либо вставка одного iframe с целым плейлистом. Первый метод неудобен а второй не функционален, по причине того, что пользователи могут не заметить список видеозаписей, который скрыт под кнопочкой в левом верхнем углу iframe-a.

Так же немаловажен аспект оптимизации. Если выложить большое количесво роликов, то увеличится вес страницы и время загрузки соответственно.

На этом этапе появилась идея воспользоваться YouTube API что бы создать подходищую структуру представления видеозаписей на странице. А именно автоматическую подгрузку с кнопочкой “показать еще”, при нажатии по которой видеозаписи будут подгружаться без перезагрузки страницы.

YouTube предоставляет возможность сделать GET-запрос к серверу по адресу [https:// www.googleapis.com/youtube/v3/ playlistItems + params] и получить ответ в виде JSON-обьекта с подробным описанием айтемов плейлиста, которые мы потом можем отобразить.

Ниже представлен полный перечень данных, которые можно получить :

Ниже будет преставлен js-код, готовый к использованию. Нужно лишь поменять ID плейлиста и Youtube API KEY на Ваши.

Как это работает?

Делаем GET запрос на сервер, получаем JSON-обьект с информацией о видеозаписях, вставляем в заготовленый кусочек верстки и в цикле выводим в определенный блок  начальное количество видеозаписей ( которое указано у нас в параметрах в свойстве g.initialCount). Далее, если видеозаписей более чем изначально показано, тогда выводим кнопочку подгрузки. При нажатии подгружаеться количество n-ное количество записей, которые мы указали в свойстве g.video_per_page, так называемый “шаг подгрузки”. Когда видео заканчиваються кнопка подгрузки прячется и на её месте появляется ссылка на плейлист на Ютубе. Почему так? Потому что здесь есть некое ограничение по количеству выводимых видео. Всего можно вывести 50 штук. а далее по ссылке перейти на Youtube и там продолжить просмотр. ( На момент написания скрипта не было нужды выводить больше 50-ти видео, потому функционал скрипта вышел немного ограниченным.)

Так же не забудем про кусочек верстки, под который адаптирован скрипт:

Готовые стили, которые вы можете потом подогнать под свой дизайн.

Warning! При клине на блок с видео будет открываться модальное окно. Скачайте и подключите плагин модальных окон FancyBox 3

Внимательно пройдитесь по параметрам скрипта и замените значение на свои. При возникновении ошибок рекомендую открыть js консоль в браузере и помсотреть в чем дело.

При возникновении трудностей обращайтесь. Для этого воспользуйтесь формой обратной связи в разделе контакты.

Пример можно посмотреть ТУТ

The end.

 

Комментарии - 1

  • Павел:

    Красавчик! Я уже весь нет перелопатил в поисках подобного материала и нашел только тут.
    Однозначно зашарю.

Прокомментировать

×
Ваш комментарий успешно отправлен
и будет опубликован после модерации
× Превышен лимит отправки комментариев за период времени.
Пожалуйста, отправьте комментарий позже.