n-wp.ru — блог о WordPress
Быстрая подгрузка встроенного видео YouTube средствами JavaScript | n-wp.ru

Быстрая подгрузка встроенного видео YouTube средствами JavaScript

Код для замещения видео из YouTube на странице его миниатюрой. Это позволяет сократить время загрузки страницы.

При вставке видео из YouTube на страницу встроенными средствами WordPress страница получается не самой быстрой — она полностью загрузится только тогда, когда отобразится видео. А если видео роликов несколько, то иногда ждать их загрузки приходится долго. Выходом из этой ситуации является отложенная загрузка видео — вместо него на странице отображается миниатюра (изображение), а само видео начинает загружаться только после клика по миниатюре. Такой способ быстрой загрузки может существенно сократить общее время загрузки страницы. Есть множество плагинов, которые позволяют делать отложенную загрузку видео из YouTube, но речь в этом посте не о них, а о том, как можно реализовать такое без плагинов.

Быстрая подгрузка встроенного видео YouTube средствами JavaScript

Тут на помощь приходит Java-код. С его помощью, указав данные видео (достаточно одного ID), можно получить его миниатюру. Вставьте в файл header.php:

Обратите внимание на sddefault.jpg — это миниатюра, которая используется для отображения на странице. YouTube создает несколько миниатюр, каждая со своим размером:

default.jpg — 120px на 90px
hqdefault.jpg — 480px на 360px
mqdefault.jpg — 32px на 180px
sddefault.jpg — 640px на 480px
maxresdefault — 1280px на 720px

Вы можете использовать любую из этих миниатюр, вставив в код ее название.

В файл style.css вставьте код оформления блока с миниатюрой:

Для того, чтобы плеер в виде миниатюры отображался на странице, нужно вставить в ее код:

YouTube предоставляет несколько параметров для отображения разных элементов управления в своем плеере:

controls: если вы установите 0, то элементы управления не будут отображаться
modestbranding: если вы установите 1, то логотип YouTube не будет отображаться
rel: если вы установите 0, то по завершению ролика не будут отображаться похожие видео
showinfo: если вы установите 0, то подробная информация о видео отображаться не будет
start: время старта видео от начала
vq: если вы установите hd720, то видео будет отображаться в высшем качестве, если такое доступно

Пример использования дополнительных параметров:

Вот такой вот прием позволяет кардинально уменьшить время загрузки страницы со множеством роликов из YouTube за счет уменьшения самого размера страницы и уменьшения количества запросов, что благотворно скажется не только на юзабилити (посетители не ждут, пока подгрузятся все видео ролики), но и на индексации (Google любит быстрые сайты).

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Комментировать

/* ]]> */