< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » JavaScript, JQuery » Отложенная загрузка видео Ютуб на сайте

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

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

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

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

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

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

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

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

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

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

Читайте также:  Создаем всплывающие окна для сайта - Magnific Popup

В архиве плагина найдете два файла: 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«.

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

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

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (Пока оценок нет)
Загрузка...

Проверка орфографии

Система Orphus

    Комментариев пока нет, будьте первым.

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

    Войти с помощью: 

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

    Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

    • Код HTML - тегами [html] ваш код... [/html]
    • Код CSS - тегами [css] ваш код... [/css]
    • Код PHP - тегами [php] ваш код... [/php]
    • Код JavaScript - тегами [code lang="js"] ваш код... [/code]