Самый эффективный метод встраивания видео You Tube!

Хорошего настроения всем читателям – Sozdaiblog.ru!

Сегодня Вы узнаете о том, как вставлять видео с You Tube на свой сайт без увеличения времени загрузки страницы.

Наверняка каждый из Вас уже давно догадался, что при встраивании видеоролика с You Tube в любую страницу Вашего Веб-ресурса, существенно увеличивает время её загрузки.

Если Вы раньше этого не знали, то сейчас самое время прозреть.

Почему так происходит? Сейчас попробую пояснить.

При внедрении любого видео YouTube на Веб-сайты с использованием стандартных тегов IFRAME, сами того не ведая, Вы создаёте кучу лишних HTTP запросов (CSS, JavaSript и просмотр архивов), которые нацелены на построение и отображение стандартного ютубовского видеоплеера.

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

Недавно я заметил, что разработчики Google Plus нашли оригинальный подход к решению данной проблемы.

Вместо того чтобы загружать и отображать целиком весь плеер со всей его навигацией, Google показывает только эскиз видеоролика, а сверху накладывает значок воспроизведения. Вот взгляните пример их инновации:

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

Те, кто подписан на обновления этого блога и постоянно получает мои новые статьи, знают, что я всё время ищу и нахожу новые способы и возможности увеличения скорости загрузки сайта. Об этом свидетельствуют следующие посты:

Ускорение загрузки сайта кэшированием браузера.
11 Способов увеличить скорость загрузки сайта.
Как увеличить скорость загрузки сайта до 1 секунды.
Безопасное ускорение сайта на CloudFlare.
Как перенести изображения на поддомен.

Вот и в этот раз я снова принялся за старое, решив разгадать тайну Google Plus, чтобы узнать, как вставлять видео с You Tube на свой сайт без увеличения времени загрузки страницы.

Как вставлять видео с You Tube эффективно.

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

СКАЧАТЬ

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

<div class="youtube" id="JZioV5d3osg" style="width:400px; height:200px;"></div>
<script src="https://Путь к файлу youtube.js" type="text/javascript"></script>

В принципе, здесь нет ничего сложного. Единственное на что стоит обратить внимание – это id. Вам потребуется прописать id необходимого видеоролика. Чтобы его узнать, достаточно включить просмотр в ютубе и заглянуть в адресную строку браузера.

Затем скопировать и вставить в вышеупомянутый код. Ещё в этом коде обязательно укажите путь к ранее загруженному файлу.

Кстати, друзья в архиве вместе со скриптом находится изображение кнопки воспроизведения. Её, как и скрипт, необходимо закинуть в удобное для Вас место на Вашем сервере, а в скрипте прописать к ней путь.

Место для вставки адреса картинки я пометил так – «дорога к изображению». Так Вам будет намного легче его найти. Если что, то Вам не обязательно использовать именно эту картинку. Можете вставить что-то своё. Всё ограничивается лишь Вашей фантазией.

На сегодня это всё. Удачи и до следующих постов...

С уважением, Денис Черников!