Лого www.SiteHere.ru

Почему нельзя вставлять видео YouTube через iframe или как ускорить загрузку страниц сайта

При создании сайта под заказ или просто для своего проекта возникает проблема со скоростью загрузки видео. Часто Google PageSpeed Insights на данную проблему не реагирует, но при загрузке в браузере скорость загрузки страницы заметно падает. Я сейчас говорю именно о видео. О тех видео, которые мы берем с сервиса Youtube. В этой статье я рассмотрю способ, который действительно ускорит загрузку страницы, на которой находится много вставок видео с Youtube.

Тему скорости загрузки страницы я раньше уже затрагивал в следующих статьях и видео:

Чтобы сравнить скорость загрузки страницы, перейдите по следующим кнопкам:

Обычная вставкаЗагрузка при клике

Как это использовать и результаты экспериментов

Эксперимент - как ускорить загрузки страницы отказавшись от iframe

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

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

Об этом эксперименте с видеороликами вы можете прочитать ниже. Я часто пользуюсь своими же статьями, которые написал довольно давно, поэтому для удобства я приведу скрипты, стили и разметку, которая необходима для вставки видео этим способом. Чтобы когда вы зайдете на данную статью второй раз (из закладок, например), могли сразу воспользоваться необходимыми материалами.

Блок "СКОПИРОВАЛ-ВСТАВИЛ"

Автор этого кода Alexis Ulrich (ссылка на оригинал в конце статьи). А сейчас, собственно, сам код с небольшими пояснениями.

1 этап. HTML разметка

HTML КОД
1
<div class="youtube" id="0wCC3aLXdOw" style="width: 500px; height: 281px;"></div>

ВАЖНО: в атрибут id необходимо вставить идентификатор вашего видео на YouTube. Если не знаете, где оно находится то смотрите видео инструкцию к этой статье ниже.

2 этап. CSS стили

Скачать изображение кнопки "Play" можно здесь — скачать кнопку "Play".

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
}
 
.youtube .play {
    background: url('../img/youtube-play-btn.png') no-repeat; /*ВАЖНО: здесь укажите адрес до изображения*/
    background-position: 0 -50px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    height: 50px;
    width: 69px;
    transition: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
 
.youtube:hover .play {
    background-position: 0 0;
}

3 этап. Javascript

JAVASCRIPT КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!document.getElementsByClassName) {
        // Поддержка IE8
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i<j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
        var videos = getElementsByClassName(document.body,"youtube");
    } else {
        var videos = document.getElementsByClassName("youtube");
    }
 
    var nb_videos = videos.length;
    for (var i=0; i<nb_videos; i++) {
        // Находим постер для видео, зная ID нашего видео
        videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';
 
        // Размещаем над постером кнопку Play, чтобы создать эффект плеера
        var play = document.createElement("div");
        play.setAttribute("class","play");
        videos[i].appendChild(play);
 
        videos[i].onclick = function() {
            // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1
            var iframe = document.createElement("iframe");
            var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
            if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
            iframe.setAttribute("src",iframe_url);
            iframe.setAttribute("frameborder",'0');
 
            // Высота и ширина iFrame будет как у элемента-родителя
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;
 
            // Заменяем начальное изображение (постер) на iFrame
            this.parentNode.replaceChild(iframe, this);
        }
    }
});

[ВИДЕО] Как использовать данный способ ускорения загрузки страниц на своих проектах?

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

Эксперимент со скоростью загрузки страницы на практике

Эксперимент со скоростью загрузки страниц

Ниже я описал 2 небольших эксперимента со скоростью загрузки страницы в зависимости от способа загрузки видео YouTube. Обратите внимание, насколько сильно отличаются цифры. Все тесты я проводил в браузере Chrome (версия 52.0.2743.116 m).

Для тестов я создал две страницы:

  • Страница #1 — здесь загрузка реализована тем способом, о котором рассказано в статье. То есть видео загружается только при клике.
  • Страница #2 — на этой странице я вставил видео обычным способом — через тег iFrame.

На протяжении двух тестов на страницах будут лишь добавляться видео.

ТЕСТ #1 — Количество видео на странице: 1

Сравнение скорости загрузки страницы с одним видеороликом

Подробное изображение со всеми запросами можно посмотреть по ссылкам:

Как видно из скриншота, на первой странице время загрузки меньше половины секунды. Оно и понятно, ведь на второй странице вдвое больше запросов. Даже на странице с одним видео заметна существенная разница. Если проанализировать запросы, то можно заметить, что на первой странице лишь 7 запросов, в то время как на второй их 15.

Но что же произойдет, если будет не одно видео, а несколько? Смотрите результаты второго эксперимента далее…

ТЕСТ #2 — Количество видео на странице: 5

Сравнение скорости загрузки страницы с одним видеороликом

Количество запросов для каждой из страниц:

Здесь разница колоссальная. Как во времени загрузки, так и по количеству запросов.

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

Вывод

Скорость загрузки страниц — это постоянно больной вопрос. Многие пишут о том, что этот вопрос остро стоит именно в наше время. Но изучая литературу по созданию сайтов, которая написана в начале 2000-х, я сделал для себя вывод: даже в то время, когда страница загружалась примерно 10 секунд, о скорости загрузки беспокоились точно также, а может даже сильнее. Причина — приходилось отказываться от графической информации и других медиа на странице.

Способ вставки видео с YouTube, который мы рассмотрели в этой статье, действительно позволяет ускорить загрузку страниц сайта. Это видно даже на глаз. Поэтому попробуйте один раз применить это на своем сайте, и вы поймете все прелести данного способа.

К сожалению, прочитав статью, многие веб-мастера разочаруются. Возможно, они ждали именно плагина для какой-либо CMS (WordPress, Joomla и т.д). Ведь намного проще установить один плагин и наслаждаться результатом. Но увы, действительно оптимизированные вещи делаются зачастую вручную. Поэтому данный способ отлично подойдет для лендингов. Но кто запрещает на основе этого JS кода написать свой плагин для WordPress, например? 😉

Успехов!

Источник

С Уважением, Юрий Немец

Почему нельзя вставлять видео YouTube через iframe или как ускорить загрузку страниц сайта 5.00/5 (100.00%) 30 голос(ов)

Понравилась статья - расскажи друзьям! :)

54 комментария к записи
  • Сергей

    Всё хорошо, но javascript уже фактически труп. Его поддержка же прекращена.

     
    • Юрий Немец

      Сергей, вы действительно уверены в этом?)

       
    • Сергей

      Вот выдержка с сайта www.java.com:

      "В браузере Chrome прекращается поддержка NPAPI для апплетов Java

      Работа подключаемых модулей Java для веб-браузеров основана на межплатформенной архитектуре подключаемых модулей NPAPI, которая уже более десяти лет поддерживается всеми основными веб-браузерами. Начиная с версии 45, выпуск которой запланирован на сентябрь 2015 г., браузер Google Chrome перестает поддерживать технологию NPAPI. Это повлияет на работу подключаемых модулей для Silverlight, Java, Facebook Video и прочих модулей, основанных на NPAPI."

       
      • Юрий Немец

        Причем тут Javascript?

         
        • Виталий

          Юрий как его сделать адаптивным?

           
          • Юрий Немец

            Добрый день, Виталий!

            Вместо HTML кода, который представлен в статье, вставьте данный код:

            <div class="youtube" id="0wCC3aLXdOw" style="width: 100%; height: 281px;"></div>

            Все остальное (CSS и JS) оставьте без изменений.

             
            • Виталий

              Да ширина получается 100 %, высоту делаем auto и ролик пропадает

               
              • Юрий Немец

                Адаптивную высоту нельзя сделать просто применив свойство height: auto. Для этого необходимо изменить структуру, а затем использовать свойство padding-top: 56.65% . Где проценты — это "высота/ширина*100". Тогда получатся проценты, которые можно вставить в свойство padding-top. Но данная структура не подходит для этого, поэтому я написал вариант использования выше.

                 
  • Сергей

    Как хорошо быть модератором в Сабскрайбе! Все новенькое всегда перед глазами!kiss

    Спасибо, Юрий, за такую полезность.

    Остался только один вопрос — влияет или нет такой способ взаимодействия сайта с Ютубе на учет видеохостингом количества просмотров видеороликов?

     
    • Юрий Немец

      Здравствуйте, Сергей!

      Данный способ влияет лишь на первоначальную загрузку. После клика дальнейшие действия с видео происходят как с обычной вставкой iframe.

       
  • Наталья Яшина

    Большое спасибо, Юрий! Как всегда полезно и информативно.

     
    • Юрий Немец

      Спасибо, Наталья! 🙂

       
  • Дмитрий

    Сбасибо вам за уроки, очень полезные.

     
    • Юрий Немец

      Спасибо, Дмитрий! Приятно видеть, что мои материалы приносят пользу.

       
  • Александр

    Уже написан jQuery плагин и виджет для Muse. https://github.com/CenterAffiliatePrograms/youtubeVideo

     
  • Руслан

    Интересный материал. Всегда думал, что видео с ютуба не замедляет загрузку сайтов. 

    Оказывается ошибался

     
  • Княгиня

    Вот тебе и на тебе… То ифрейм предлагался как прогрессивный способ вставки, а оказывается — всё иначе.

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

     
  • Aleksey

    А если мне видео не с ютуба нужно было, например у меня на странице 9 роликов, и нужно сделать что бы не один формат видео подгружался, а 3 — mp4, webm и ogv?

     
  • Алмаз

    Большое спасибо! Оптимизировал на своем сайте все страницы!

     
  • Алмаз

    А как исправить ошибку в IE? Не хочет воспроизводить в этом браузере…

     
  • Алмаз

    Исправил немного код и оптимизировал для Internet Explorer и Google Chrome, теперь показывает и там и там, именно с мобильного телефона, а с компьютера итак все работало. Разбирался долго, но сделал все круто)

     
  • Seosko

    Интересная статья, ведь iframe загружается асинхронно, то есть ваш способ просто помогает сократить время на загрузку видео + уменьшает нагрузку на сервер за счет сокращения количества запросов.

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

     
  • Алексей

    Прекрасно!

    А можно как-то допустить переход в полноэкранный режим и избежать появления всплывающего сообщения о неудачной попытке переключиться в него?

    Спасибо за статью, всех благ.

     

     
  • Павел

    А если видео с ВКонтакте?

     
  • zmoe

    Поставил себе, очень кстати, только код скрипта лучше выносить в отдельный js файл.

     
  • Александр

    Так как специалист из меня аховый устал я уже с бубном плясать, на всех сайтах в описанном вами способе видео спечкоробковое, нет возможности переключения в полноэкранный режим, есть возможность только выгнать своих посетителей для приятного просмотра на YouTube. Блин как сделать полноэкранный режим всякие fs=1 не прокатывают. Не знаете, так и  напишите, "фиг его знает, за что купили за то продаем". Просто быстрая загрузка страницы это конечно отлично, но без полноэкранного режима … пусть на пару тройку секунд дольше прогрузится зато посетители дома останутся.

     
  • Дмитрий

    Добрый день. У меня необходимость вставить несколько видео, но не просто ролик, а несколько плейлистов, какие параметры в данном случае использовать в качестве id или нужно что-то менять кардинально?

     
    • Юрий Немец

      Добрый день, Дмитрий!

      Пример, который рассмотрен в статье может служить только основой, и может дорабатываться вами самостоятельно.

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

      Вы можете использовать следующий код, если желаете самостоятельно задавать изображения (превью) для своих видео. Их можно будет задавать в атрибуте data-mimg в html.

      А сейчас по этапам, чтобы у вас заработал плейлист с данным способом:

      1) Вставляете следующую HTML разметку:

      <div class="youtube" 
          id="PLAZyWa5bxyz_c2wQfcQ-RHr1zT6TL82W4"
          style="width: 640px; height: 348px;"
          data-mimg="img/poster.jpg"></div>

      где: id — идентификатор плейлиста, когда вы его создали и у вас есть iframe для вставки, то вы там сможете найти этот идентификатор, data-mimg — адрес до изображения с превью изображением, которое будет показывать изначально, до того, как кликнули на кнопку Play.

      2) В JS файл вставить следующий код:

      function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
      r(function(){
        if (!document.getElementsByClassName) {
          // Поддержка IE8
          var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i<j; i++)
              if(re.test(els[i].className))a.push(els[i]);
            return a;
          }
          var videos = getElementsByClassName(document.body,"youtube");
        } else {
          var videos = document.getElementsByClassName("youtube");
        }
      
        var nb_videos = videos.length;
        for (var i=0; i<nb_videos; i++) {
            
          videos[i].style.backgroundImage = 'url('+videos[i].getAttribute("data-mimg")+')';
      
          var play = document.createElement("div");
          play.setAttribute("class","play");
          videos[i].appendChild(play);
      
          videos[i].onclick = function() {
            var iframe = document.createElement("iframe");
            var iframe_url = "https://www.youtube.com/embed/videoseries?list=" + this.id + "&autoplay=1";
            iframe.setAttribute("src",iframe_url);
            iframe.setAttribute("frameborder",'0');
      
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;
      
            this.parentNode.replaceChild(iframe, this);
          }
        }
      
      });

      На этом все.

       
  • артем

    как изменить картинку в hd формат а также сделать фоновым видео?

     
  • НеЯлена

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

     
  • Кирилл

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

     
    • Юрий Немец

      Здравствуйте, Кирилл!

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

      https://www.youtube.com/embed/tcVov_zfeTY?rel=0

      После вставки адреса видео, необходимо дописать параметр ?rel=0.

      Если это не первый параметр, то перед данным параметром необходимо поставить &rel=0. Следующим образом:

      https://www.youtube.com/embed/tcVov_zfeTY?autoplay=1&rel=0

       

       
      • Кирилл

        куда именно его вписать. У нас в коде нет такой строки. Это стандартная рекомендация, которая настраивается в youtube. А как ее привязать к скрипту?

         
  • Кирилл

    Спасибо. И еще вопрос. Как включить полноэкранный режим

     
  • Кирилл

    со всеми вопросами разобрались. Остался только полноэкранный режим. Как его включить?

     
  • Юрий Немец

    Кирилл, для этого необходимо дописать параметр в URL: &fs=1.

    Все параметры настройки видео Youtube вы можете изучить здесь — перейти.

     
    • Владимир

      а в конструкции нет же URL. идет id="0wCC3aLXdOw". подскажите плиз куда ставить этот параметр &fs=1 для полноэкранного режима

       
      • Юрий Немец

        Добрый день, Владимир!

        Обратите внимание на второй пример в данном демо — перейти.

        Там есть такой параметр, как "data-params", в который и необходимо вставить.

         
        • Владимир

          конструкция все равно не работает. я делал как во втором примере. а вы сами пробовали? по идеи параметр fs=1 идет по умолчанию. но в данном случае он не срабатывает

           
          • Юрий Немец

            Владимир, значит, вы делаете что-то не так.

             
  • Владимир

    кнопка то есть полноэкранного режима, но она не срабатывает

     
  • Владимир

    Как добиться полноэкранного режима? Юрий, это возможно реализовать или, все таки, нет?

     
    • Юрий Немец

      Владимир, на полноэкранный режим данный способ вставки видео не влияет, возможно вы сделали слишком маленькое окно для просмотра, поэтому у вас нет кнопки полноэкранного режима. А если кнопка есть, но она не нажимается, то внимательно посмотрите на сообщение, которое всплывает при наведении на иконку полноэкранного режима.

       
  • Алёша

    Может кому будет интересно посетить иностранные сайты, схожие темы вставки видео с подгрузкой. Там другой вариант кода. Работает просмотр на весь экран + можно убрать превью похожих роликов при нажатии на паузу и в конце основного видео.
    1. https://www.labnol.org/internet/light-youtube-embeds/27941/

    2. https://schoberg.net/2015/08/fast-agile-youtube-embed-responsive-iframe-load-delay-with-jquery/

    Вторая ссылка с полезными комментариями как здесь.

     
    • Аркадий

      Спасибо!  Все работает без проблем.

       
  • Devvver

    Плагин для Wp никто не сделал из кода? Поделитесь

     
    • Юрий Немец

      Здравствуйте, Евгений!

      Плагин для WP похожий есть: Lazy Load for Videos. Но если вам нужно применить этот способ для простого лендинга, то отлично подойдет пример из статьи.

       
      • Devvver

        Поставил в результате плагин Video Embed Optimizer, просто бомба по скорости. Из минусов нет микроразметки.

         
  • Полис

    Подскажи пожалуйста, сделали сайт под концерт дискотеки в краснодаре.

    Все хорошо но все-же хотелось бы ускорить загрузку видео на заставке на главной.

    Работаем на OpenCart.

     
    • Юрий Немец

      Уменьшите длительность видео, так как это фоновое видео, то 2 минуты никто смотреть его не будет.

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

       
  • Денис

    Как-то результат противоположный https://prnt.sc/fj8lye

     
    • Юрий Немец

      Добрый день, Денис!

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

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

       
  • Gamer

    Не знал о способе. Но у меня на сайте 130 игр с роликами. Их теперь по одному менять? Через реплейс в базе данных можно как-то реализовать? 

     

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

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