Отложенная загрузка видео Ютуб на сайте

Отложенная загрузка видео Ютуб на сайте

6 004 в JavaScript , SEO 11

Доброго времени суток уважаемые посетители! Небольшое вступление про то, что давно не писал на блоге. Причина — строительство своего дома. Стройка отняла у меня очень много времени, начиная с теории, заканчивая практикой. Ведь кроме фундамента, стен и кровли все остальное делал сам своими руками. Так как я не профессионал в этом деле, много времени убил на получение теоретических знаний, просматривая ролики в Ютуб. Сейчас не буду все расписывать, это отдельная тема для разговора. Возможно создам отдельный проект на эту тему, так как многое фиксировал на видеокамеру. Ну а сейчас же затронем тему видео-роликов Ютуб.

Речь пойдет о том, как вставить видео Ютуб на сайте так, чтобы при загрузке страницы не грузились ресурсы видео, тормозя загрузку самой страницы нашего сайта. Какие это ресурсы? Например, стили, скрипты, шрифты, картинки ютуб плеера. На их загрузку тратится время. В результате тесты на сервисе PageSpeed от Гугл дают не очень хорошие результаты.

Хотелось бы, чтобы было так — страница с видео роликом Ютуб загрузилась, а само видео с плеером нет. Из ресурсов мы подгружаем только картинку-заставку видео. Кликнув по картинке происходит загрузка и показ видео. При таком раскладе необходимы ресурсы грузятся только тогда, когда мы кликнули по заставке. Можно конечно закрыть на это глаза, если на странице всего одно видео. А если их несколько — 2, 3, 4 …?

Вышеописанные хотелки можно реализовать и воплотить в жизнь с помощью небольшого плагина под названием LazyYT.

Давайте сначала посмотрим, как это работает.

Теперь давайте рассмотрим как это подключить к своему сайту.

Подключение LazyYT

Ознакомиться и скачать данный jQuery плагин можно с официального сайта.

Читайте также:  Enquire.js — используем css медиа-запросы в JS

В архиве плагина найдете два файла: lazyYT.css и lazyYT.js. Подключаем их на своем сайте.

<link href="your_domain/template_path/css/lazyYT.css" rel="stylesheet" />
<script src="your_domain/template_path/js/lazyYT.js"></script>

Далее в том месте сайта, где мы хотим вывести видео вставляем следующий html-код:

<div class="lazyYT" data-youtube-id="_индефикатор видео ютуб_" data-ratio="16:9">Заголовок видео</div>

В атрибут data-youtube-id вставляем идентификатор видео на Ютуб. Где его взять? Для примера давайте возьмем видео, что указано в демке. Переходим на страницу с видео на Ютуб. В адресной строке браузера выделяем и копируем идентификатор видео.

Идентификатор видео Ютуб

Далее у нас идет не обязательный атрибут data-ratio=»16:9″, который задает пропорции видео. Вместо data-ratio можно явно указать размеры видео: data-width=»300″ data-height=»200″. Но я предпочитаю указывать именно «16:9», так как видео должно быть адаптивным.

Вместо текста «Заголовок видео» вставляем заголовок вашего видео. Здесь можно написать произвольно как вам угодно.

Теперь последнее, что остается сделать — это инициализировать плагин.

$('.lazyYT').lazyYT();

После таких нехитрых действий на сайте вместо вставки html-кода с идентификатор видео должно появиться заставка видео с узнаваемой иконкой от Ютуб.

Будет выглядеть примерно так

Если хотите добавить дополнительные параметры в урл тега Iframe видео, то можно задать их атрибуте «data-parameters«.

Вот и все дела. На этом все, надеюсь кому пригодится. Задавайте комментарии, если что не понятно. С удовольствием отвечу.

До встречи в следующих постах!

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (Пока оценок нет)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории