Самый эффективный метод встраивания видео 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 необходимого видеоролика. Чтобы его узнать, достаточно включить просмотр в ютубе и заглянуть в адресную строку браузера.
Затем скопировать и вставить в вышеупомянутый код. Ещё в этом коде обязательно укажите путь к ранее загруженному файлу.
Кстати, друзья в архиве вместе со скриптом находится изображение кнопки воспроизведения. Её, как и скрипт, необходимо закинуть в удобное для Вас место на Вашем сервере, а в скрипте прописать к ней путь.
Место для вставки адреса картинки я пометил так – «дорога к изображению». Так Вам будет намного легче его найти. Если что, то Вам не обязательно использовать именно эту картинку. Можете вставить что-то своё. Всё ограничивается лишь Вашей фантазией.
На сегодня это всё. Удачи и до следующих постов...
С уважением, Денис Черников!