
Май 14, 2020 Запись была обновлена
Почему нельзя вставлять видео YouTube через iframe или как ускорить загрузку страниц сайта

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

Более подробно про это исследование вы можете почитать на habr.com.
Понимаете сейчас, как важно для пользователей сделать быструю загрузку страниц. Мобильный интернет, какой бы он быстрый не был, сейчас еще не на таком уровне, как на компьютерах.
Сравнение скорости загрузки
Чтобы сравнить скорость загрузки страницы, перейдите по следующим кнопкам:
Обычная вставкаЗагрузка при клике
Как это использовать и результаты экспериментов

Вначале я хотел просто рассказать о способе, который позволяет ускорить загрузку видео, которые веб-мастера берут с сервиса YouTube. Потому что, изначально сервис YouTube предлагает использовать для вставки видео именно iframe. Но, как в любой ситуации, всегда можно найти еще лучшее решение.
Затем я решил просто сравнить количество HTTP запросов на странице, где нет вставок iframe, со страницей, где я для примера вставил несколько видеороликов. Я понимал, что этот способ действительно уменьшает время загрузки страницы, но был приятно удивлен, когда увидел, что загрузка уменьшается в десятки раз.
Об этом эксперименте с видеороликами вы можете прочитать ниже. Я часто пользуюсь своими же статьями, которые написал довольно давно, поэтому для удобства я приведу скрипты, стили и разметку, которая необходима для вставки видео этим способом. Чтобы когда вы зайдете на данную статью второй раз (из закладок, например), могли сразу воспользоваться необходимыми материалами.
Блок "СКОПИРОВАЛ-ВСТАВИЛ"
Автор этого кода Alexis Ulrich (ссылка на оригинал в конце статьи). А сейчас, собственно, сам код с небольшими пояснениями.
1 этап. HTML разметка
ВАЖНО: в атрибут id необходимо вставить идентификатор вашего видео на YouTube. Если не знаете, где оно находится то смотрите видео инструкцию к этой статье ниже.
2 этап. CSS стили
Скачать изображение кнопки "Play" можно здесь — скачать кнопку "Play".
.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
'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); } } });
Позиции сайта не растут в Яндекс и Google?
Закажите полный разбор сайта по SEO + консультацию
Сделайте аудит своего сайта самостоятельно с помощью сервиса
[ВИДЕО] Как использовать данный способ ускорения загрузки страниц на своих проектах?
Возможно, для кого-то не до конца ясно, куда необходимо вставить тот или иной участок кода. В небольшом видео я показал, как пользоваться материалами данной статьи на практике.
Эксперимент со скоростью загрузки страницы на практике

Ниже я описал 2 небольших эксперимента со скоростью загрузки страницы в зависимости от способа загрузки видео YouTube. Обратите внимание, насколько сильно отличаются цифры. Все тесты я проводил в браузере Chrome (версия 52.0.2743.116 m).
Для тестов я создал две страницы:
- Страница #1 - здесь загрузка реализована тем способом, о котором рассказано в статье. То есть видео загружается только при клике.
- Страница #2 - на этой странице я вставил видео обычным способом — через тег iFrame.
На протяжении двух тестов на страницах будут лишь добавляться видео.
ТЕСТ #1 - Количество видео на странице: 1

Подробное изображение со всеми запросами можно посмотреть по ссылкам:
Как видно из скриншота, на первой странице время загрузки меньше половины секунды. Оно и понятно, ведь на второй странице вдвое больше запросов. Даже на странице с одним видео заметна существенная разница. Если проанализировать запросы, то можно заметить, что на первой странице лишь 7 запросов, в то время как на второй их 15.
Но что же произойдет, если будет не одно видео, а несколько? Смотрите результаты второго эксперимента далее...
ТЕСТ #2 - Количество видео на странице: 5

Количество запросов для каждой из страниц:
Здесь разница колоссальная. Как во времени загрузки, так и по количеству запросов.
Я думаю становится понятно, что чем большее количество видео используется на странице, тем дольше будет осуществляться загрузка страницы.
Технические ошибки не дают расти в SEO?
Закажите полный разбор сайта по SEO + консультацию
Сделайте аудит своего сайта самостоятельно с помощью сервиса
Вывод
Также обязательно изучите плагин lazyYT.js. Он отлично подходит для решения этой задачи. Демо можно посмотреть здесь.
Скорость загрузки страниц - это постоянно больной вопрос. Многие пишут о том, что этот вопрос остро стоит именно в наше время. Но изучая литературу по созданию сайтов, которая написана в начале 2000-х, я сделал для себя вывод: даже в то время, когда страница загружалась примерно 10 секунд, о скорости загрузки беспокоились точно также, а может даже сильнее. Причина — приходилось отказываться от графической информации и других медиа на странице.
Способ вставки видео с YouTube, который мы рассмотрели в этой статье, действительно позволяет ускорить загрузку страниц сайта. Это видно даже на глаз. Поэтому попробуйте один раз применить это на своем сайте, и вы поймете все прелести данного способа.
К сожалению, прочитав статью, многие веб-мастера разочаруются. Возможно, они ждали именно плагина для какой-либо CMS (WordPress, Joomla и т.д). Ведь намного проще установить один плагин и наслаждаться результатом. Но увы, действительно оптимизированные вещи делаются зачастую вручную. Поэтому данный способ отлично подойдет для лендингов. Но кто запрещает на основе этого JS кода написать свой плагин для WordPress, например? 😉
Успехов!
С Уважением, Юрий Немец
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Всё хорошо, но javascript уже фактически труп. Его поддержка же прекращена.
Сергей, вы действительно уверены в этом?)
Вот выдержка с сайта www.java.com:
"В браузере Chrome прекращается поддержка NPAPI для апплетов Java
Работа подключаемых модулей Java для веб-браузеров основана на межплатформенной архитектуре подключаемых модулей NPAPI, которая уже более десяти лет поддерживается всеми основными веб-браузерами. Начиная с версии 45, выпуск которой запланирован на сентябрь 2015 г., браузер Google Chrome перестает поддерживать технологию NPAPI. Это повлияет на работу подключаемых модулей для Silverlight, Java, Facebook Video и прочих модулей, основанных на NPAPI."
Причем тут Javascript?
Юрий как его сделать адаптивным?
Добрый день, Виталий!
Вместо HTML кода, который представлен в статье, вставьте данный код:
Все остальное (CSS и JS) оставьте без изменений.
Да ширина получается 100 %, высоту делаем auto и ролик пропадает
Адаптивную высоту нельзя сделать просто применив свойство height: auto. Для этого необходимо изменить структуру, а затем использовать свойство padding-top: 56.65% . Где проценты — это "высота/ширина*100". Тогда получатся проценты, которые можно вставить в свойство padding-top. Но данная структура не подходит для этого, поэтому я написал вариант использования выше.
Ну Серега ну даешь. Книги почитай
Пруф приведи по такому экспертному заключению.
Как хорошо быть модератором в Сабскрайбе! Все новенькое всегда перед глазами!
Спасибо, Юрий, за такую полезность.
Остался только один вопрос — влияет или нет такой способ взаимодействия сайта с Ютубе на учет видеохостингом количества просмотров видеороликов?
Здравствуйте, Сергей!
Данный способ влияет лишь на первоначальную загрузку. После клика дальнейшие действия с видео происходят как с обычной вставкой iframe.
Спасибо!
Большое спасибо, Юрий! Как всегда полезно и информативно.
Спасибо, Наталья! 🙂
Сбасибо вам за уроки, очень полезные.
Спасибо, Дмитрий! Приятно видеть, что мои материалы приносят пользу.
Уже написан jQuery плагин и виджет для Muse. https://github.com/CenterAffiliatePrograms/youtubeVideo
Интересный материал. Всегда думал, что видео с ютуба не замедляет загрузку сайтов.
Оказывается ошибался
Вот тебе и на тебе… То ифрейм предлагался как прогрессивный способ вставки, а оказывается — всё иначе.
Не знаю, будет ли время, но стоит попробовать сделать шорткод для Вордпресса (нет, плагин писать не возьмусь, а шорткод — в самый раз).
А если мне видео не с ютуба нужно было, например у меня на странице 9 роликов, и нужно сделать что бы не один формат видео подгружался, а 3 — mp4, webm и ogv?
Большое спасибо! Оптимизировал на своем сайте все страницы!
А как исправить ошибку в IE? Не хочет воспроизводить в этом браузере…
Исправил немного код и оптимизировал для Internet Explorer и Google Chrome, теперь показывает и там и там, именно с мобильного телефона, а с компьютера итак все работало. Разбирался долго, но сделал все круто)
А что исправили для мобильных?
Интересная статья, ведь iframe загружается асинхронно, то есть ваш способ просто помогает сократить время на загрузку видео + уменьшает нагрузку на сервер за счет сокращения количества запросов.
Как по мне, так в WordPress могли бы уже давно в залить в движок кнопки и оформления ютуба. Зачем же столько лишних запросов наплодили..
Прекрасно!
А можно как-то допустить переход в полноэкранный режим и избежать появления всплывающего сообщения о неудачной попытке переключиться в него?
Спасибо за статью, всех благ.
А если видео с ВКонтакте?
Поставил себе, очень кстати, только код скрипта лучше выносить в отдельный js файл.
Так как специалист из меня аховый устал я уже с бубном плясать, на всех сайтах в описанном вами способе видео спечкоробковое, нет возможности переключения в полноэкранный режим, есть возможность только выгнать своих посетителей для приятного просмотра на YouTube. Блин как сделать полноэкранный режим всякие fs=1 не прокатывают. Не знаете, так и напишите, "фиг его знает, за что купили за то продаем". Просто быстрая загрузка страницы это конечно отлично, но без полноэкранного режима … пусть на пару тройку секунд дольше прогрузится зато посетители дома останутся.
Добрый день. У меня необходимость вставить несколько видео, но не просто ролик, а несколько плейлистов, какие параметры в данном случае использовать в качестве id или нужно что-то менять кардинально?
Добрый день, Дмитрий!
Пример, который рассмотрен в статье может служить только основой, и может дорабатываться вами самостоятельно.
Чтобы вставить плейлист, здесь аналогичная ситуация: необходимо лишь заменить ссылку на видео, так как у вас там будет плейлист. Кроме этого, необходимо изменить постер, который показывается до клика.
Вы можете использовать следующий код, если желаете самостоятельно задавать изображения (превью) для своих видео. Их можно будет задавать в атрибуте data-mimg в html.
А сейчас по этапам, чтобы у вас заработал плейлист с данным способом:
1) Вставляете следующую HTML разметку:
где: id — идентификатор плейлиста, когда вы его создали и у вас есть iframe для вставки, то вы там сможете найти этот идентификатор, data-mimg — адрес до изображения с превью изображением, которое будет показывать изначально, до того, как кликнули на кнопку Play.
2) В JS файл вставить следующий код:
На этом все.
как изменить картинку в hd формат а также сделать фоновым видео?
Здравствуйте, Юрий. Спасибо за интересный вариант загрузки видео. Есть ли решения для адаптации этого скрипта под мобильные устройства? Очень буду признательна, если выложите код на сайт или мне на почту
А как сделать, чтобы не проигрывались потом похожие видео. С iframe понятно, а вот с такой реализацией не совсем.
Здравствуйте, Кирилл!
Для того, чтобы в конце видео не появились похожие видео, необходимо в адрес дописать атрибут:
После вставки адреса видео, необходимо дописать параметр ?rel=0.
Если это не первый параметр, то перед данным параметром необходимо поставить &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/
Вторая ссылка с полезными комментариями как здесь.
Спасибо! Все работает без проблем.
Спасибо, за данное решение. Все супер работает + адаптивность от fitvids = все четко ) благодарю
Плагин для Wp никто не сделал из кода? Поделитесь
Здравствуйте, Евгений!
Плагин для WP похожий есть: Lazy Load for Videos. Но если вам нужно применить этот способ для простого лендинга, то отлично подойдет пример из статьи.
Поставил в результате плагин Video Embed Optimizer, просто бомба по скорости. Из минусов нет микроразметки.
Подскажи пожалуйста, сделали сайт под концерт дискотеки в краснодаре.
Все хорошо но все-же хотелось бы ускорить загрузку видео на заставке на главной.
Работаем на OpenCart.
Уменьшите длительность видео, так как это фоновое видео, то 2 минуты никто смотреть его не будет.
В зависимости от посещаемости сайта и качества вашего хостинга вы можете разместить видео у себя на хостинге и сделать загрузку таким образом: когда сайт только загрузился, вы загружаете только изображение, параллельно подгружая фоновое видео, как в этой статье — как сделать видео на фоне. А затем скрываете изображение и запускаете видео.
Как-то результат противоположный https://prnt.sc/fj8lye
Добрый день, Денис!
По вашему скриншоту отчетливо видно, что в основном время отличается из-за времени отклика сервера, а сама страница, как я писал в статье, действительно меньше по размеру.
Скорее всего вы провели этот тест один раз, если вы несколько раз отправите два этих URL-адреса на проверку, то и время отклика сервера будете получать каждый раз несколько другое.
Не знал о способе. Но у меня на сайте 130 игр с роликами. Их теперь по одному менять? Через реплейс в базе данных можно как-то реализовать?
Спасибо за статью, полезно!
Возник вопрос следующий:
Как сделать, чтоб при проигрывании первого видео, включая второе на этой же странице, первое ставилось автоматом на паузу и при этом сново появлялась кнопка Play.
Спасибо)
Я проверил, без ифрейм http://prntscr.com/gs03pl а как обычный скачиваемый код с ютуба http://prntscr.com/gs044z
Результат с обычным кодом Ютуба быстрее на 5%.
Так что не понятно все вышеизложенные выводы.
Отличная статья. Спасибо!
Сделал вставку видео. Постер средствами css удалось отцентрировать. А вот после клика ролик слева экрана.
Код в javascript
не помог.
Подскажите, пожалуйста, как отцентрировать ролик.
Добра всем!!! Ситуация значит такая. Поставил видео в ajax окошко … Но вот как сделать так, чтобы при закрытии данного окна видео выключалось, а так происходит что оно продолжает проигрывать.
Минус этого способа и всему ему подобных где есть Autoplay в том, что чтобы запустить ролик на телефонах ( а сейчас это львиная доля трафика) нужно кликнуть дважды.
Юзер может не понять, что кликнуть нужно еще раз и уйдет с сайта..
Точно. Тоже хотел это написать. А исправить как то это можно, не знаете?
Добрый вечер Юрий Немец!
Скажите а есть возможность таким же способом сократить загрузку только не видео на youtube а "iframe" 3d виртуальных туров? . Вот пример чего я вставляю на сайте . а то боюсь у меня сайт не потянет большую галерею сделать
<iframe id="airpano_frame" width="700" height="450" src="/Lazurn_StTrope_StMaxime/2-3-2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" framespacing="0"> </iframe>
Перепробовала все, что рекомендовали. В результате ютуб отказывается воспроизводить видео, пишет, что недоступно. Намучилась.
Вернула фрейм. Видно ютубу не выгодно. Или я где-то ошиблась.
А в основном сайт удивительно хорош. Есть чему учиться.
Благодарю Немца!!!
Здравствуй, Юра. Как всегда очень полезная информация. Коснулось дело до страницы — видеогалереи. Данное решение значительно оптимизирует скорость загрузки. Смотрел еще о картах Yandex статью, тоже пригодится.
Здравствуй, Егор! Спасибо! 🙂
Здравствуйте, Юрий!
Сделал, все как описано выше. Видео не открывается. На месте, где оно должно быть ничего нет. Вылазит ошибка: TypeError: r is not a function. CMS: wordpress, попробовал в редакторе онлайн, там все работает. Не подскажите в чем может быть причина?
Здравствуйте. Мне понравился Ваш скрипт с выбором своего превъю. Но Ваш скрипт работает данным образом только для плейлистов. Хотелось бы данную функцию иметь для одиночного видео. В Javascript не силен. Путем тыканий получилось запустить нужный мне код с одним НО. (название превьюшки должно совпадать с ID видео.) Что-то мне не нравиться данный метод. PageSpeed Insights ругается на превью по дефолту — от сюда и пляски. Подскажите пожалуйста как решить данный вопрос. Обращаюсь к вам, так как на Вашей странице с данной статьей сервис гугл на превьюшку не ругается.
Вот код:
<script type="text/javascript">
'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(./myimg/video_preview/' + videos[i].id + '.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); } }});
</script>.
Как прописать правильно, чтобы можно было указать в html название, а скрипт его подхватывал, как в примере со скриптом для плейлиста?
Спасибо.
В блок
.youtube {
***
}
Добавьте:
background-size: cover
Тогда размер картинки будет подгоняться под размер блока с видео.
У видео не всегда есть SD качество привьюшки.
sddefault можно заменить на
videos[i].style.backgroundImage = ‘url(http://i.ytimg.com/vi/‘ + videos[i].id + ‘/hqdefault.jpg)’;
а за статью большое спасибо. очень выручило!
Ребята, всем привет!
К вам за советом. Есть вот такой сайт. Делается на Muse.
<p><img src="C:\Users\Marinochka\Documents\MalenaHome\Psd\001.jpeg"></p>
Второй блок сайта должен быть заполнен видео (YouTube/Vimeo/Файл на хосте).
Задача в том, чтобы видео было:
— на всю ширину и высоту (до границы хедера) окна браузера,
— было адаптивным при изменении ширины браузера,
— а также чтобы контейнер видео начинался строго после хедера с меню, который зафиксирован на верхней части сайта (в шаблоне).
<p><img src="C:\Users\Marinochka\Documents\MalenaHome\Psd\002.jpeg"></p>
В идеале конечно идея, чтобы еще прокрутка на второй блок с видео была по принципу слайда, т.е. первое движение колесом мыши и сразу второй блок, четко заполненный по окну браузера..
Заранее благодарю!
Здравствуйте, вопрос, на сео оно влияет?
Как обычно щас вывод стоит без оптимизации и поисковые системы видят что по мимо текста на сайте есть и видео, а если я оптимизирую вашим способом, будут ли видеть поисковики что есть видео на странице?
Добрый день. Отличная статья,но возникли проблемы. При вставке Javascript выдает следующую ошибку:
в этой строке function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
Помогите,пожалуйста,разобраться
Кто-нибудь смог решить проблему с автопроигрыванием на мобильных браузерах?
Пользователю приходится два раза тыкать.
Есть ли способ заставить работать эту фичу еще и на Google AMP страницах?
Я через <video> ролики вставляю
и работают отлично и на скорости загрузки сайта практически не сказывается
Спасибо за материал, очень пригодился. Но есть одно дополнение.
У меня видео не открывалось на весь экран, а вставку необходимо было сделать в сайдбар (т.е видео было малого размера).
там после
iframe.setAttribute("src",iframe_url);
iframe.setAttribute("frameborder",'0');
Можно добавить
iframe.setAttribute("allowfullscreen",'');
Чтобы кнопка "смотреть на весь экран" была активной.
Так и не получилось активировать autoplay, пробовал по разному, но мб это у меня так браузер криво настроен.
Чего-то не отображается кнопка, может из-за того, что 3 видео сразу воткнул?
Здавствуйте! Юрий, может есть решение на сегодня? На Апрель 2019? Что бы не нажимать по 2 раза на проигрыватель на мобильных?? Готов оплатить помощь в $.
Юрий, огромное спасибо за Ваш труд! Очень качественное описание и изложение скрипта. И решение проблем с ускорением скорости загрузки сайта, содержащего ifreme от Ютуб.
Здравствуйте, Юрий. Спасибо. Все получилось. Сделал на двух сайтах, на одном все отлично, на втором почему то над постером не появляется "палец" чтобы показать, что картинка активная. Может это как-то связано с тем, что домен кириллический?
Добрый день, Юрий!
Код, к сожалению, не вижу, но домен точно на это не влияет. Вам нужно сравнить как вы на первом сайте сделали, возможно что-то упустили.
Идея имеет право на существование. На 2019 год это уже спокойно реализуется ленивой загрузкой ребят. Автору респект за ещё один способ. Добавлю себе в копилочку.
Здравствуйте, все сделал как у вас описано в статье, все работает, но почему то видео автоматически не запускается, приходиться повторно нажимать на кнопку Play в плеере Ю тюб. Может скрипт конфликтует. А может какая то ошибка у вас в коде?
И видео не открывается в полно экранном режиме. Пишет не удалось открыть.
Здравствуйте! Попробуйте JS библиотеку lazyYT.js. Я думаю будет проще решение, чем в статье.
Здравствуйте, вот сейчас подсмотрел хороший вариант, у меня все работает, человек все очень четко и понятно объясняет, вот ссылка на его видео: https://youtu.be/4JS70KB9GS0 , думаю будет очень полезно всем.
Добрый вечер. Выполнила все по вашей инструкции — работает на ура. Только не могу настроить адаптивность. А как подключить lazyYT.js не понимаю. Может быть напишете подробную инструкцию? Было бы классно.
Добрый вечер, Надежда!
Отлично, что у вас все получилось. Чтобы адаптивность настроить, нужно задать ширину через CSS и указать либо в процентах, либо с помощью свойства max-width.
Процесс подключения lazyYT довольно простой:
1) Необходимо подключить jQuery и сам скрипт lazyYT.js
2) Вставить тег div с вашим id видео:
3) В своем файле Javascript инициализировать данный плагин:
Если будут вопросы — пишите в ответ на этот комментарий.
Огромное спасибо. Буду разбираться. Надеюсь, что получится. Но честно говоря, я не специалист. Поэтому уйдет много времени. Потом напишу результат.
Подскажите плз .. !!!
Использую данный код вместо iframe ( не для просмотра видео)
Нужно сделать так, чтобы была еще одна кнопка которая закрывала бы iframe и возвращала данный код в изначальное состояние (то есть на превью как было до нажатия)
Добрый вечер, Юрий. Перепробовала много разных вариантов. Но увы моих мозгов не хватило. Адаптивность не получается. Другие скрипты тем более. Что конкретно написать в CSS Вашего варианта, чтобы получилась толковая адаптивность? Заранее Вам благодарна.
Надежда, добрый вечер! Посмотрите пример в статье (добавил нужный CSS). Сейчас на мобильных устройствах будет адаптивно.
Огромное спасибо. А можно ли как-то сделать, чтобы на больших экранах не было так много черного с боков? Чтобы было красивее? Это было бы вообще здорово. Я проверяла скорость загрузки страниц с видео, вставленным сразу через iframe и по Вашему варианту. Получается на 1 сек. быстрее. А это очень важно. Ваша статья — просто спасение для меня и таких как же чайников.
Надежда, вы имеете ввиду когда проигрывается видео сбоку есть черные полосы? Если да, то нужно лишь высоту увеличить.
Если просто увеличить высоту — получается много черного сверху и снизу на узких экранах. Методом тыка добавила контейнер для видео с css
Стало полностью круто. Теперь страницы с видео загружаются не 3 сек, а 2 сек. Я думаю, что это очень хорошо.
Только благодаря таким подробным статьям, как Ваша, я смогла сделать и продвигать свой сайт perlu24.com Огромнейшее Вам спасибо. Постараюсь освоить еще несколько Ваших инструкций.
Как-то статья стала странно выглядеть. Наверное что-то сбилось
Спасибо, поправил 🙂 .
Доброго времени!
«на основе этого JS» — зачем !? Этот функционал есть в плагинах кэширования, к примеру в WP Rocket, там и миниатюра нарезается на автомате и подгрузка ролика при клике.
А что если сайт не на WordPress?
Спасибо. Крутой совет
А сам к этому дошел или где-то подсмотрел
Здравствуйте! Подскажите, как можно отключить видео или остановить при клике по кнопке в слайдере
Первым способом — вставкой кода не получилось, плеер не отображается. Хотя, раньше тоже им пользовалась, потом перешла на вставку от ютуба с iframe.
В редакторе страницы на вордпресс можно ведь использовать функцию «вставка медиафайла», что позволяет вставить адрес страницы на видео хостинге. Так не проще?
Здравствуйте, Татьяна!
Когда вы вставляете через iframe, то подгружаются CSS и JS файлы от YouTube. Но бывает такое, что пользователь иногда не смотрит видео, но если он был на странице, то сторонние ресурсы все же загрузились.
Чтобы это предотвратить был создан такой способ загрузки, когда ресурсы с Youtube начинают загружаться только в случае, если пользователь планирует посмотреть видео.
Еще один способ: это сделать загрузку во всплывающем окне, как я сделал на этой странице при просмотре видео.
ЗДравствуйте? спасибо за статью — видео добавил сайт стал шустрее
но вот почему-то не появляется кнопка PLAY на видео, и картинка которая сейчас на видео маленькая и кривая — потому что у меня 6 видео вместе
вот код css
путь прописал правильно!
——————————
вот полнейшый путь к изображению:
ftp://wprbgqtc@s37.s-host.com.ua/public_html/smart-protect.com.ua/img/youtube-play-btn.png
———————-
и так пробовал и не работает, сами видео работаю воспроизводятся, но вот кнопка по середине не появляеться
Как исправить? Кто понимает в чем причина?
———————-
И второй вопрос — как добавить на те видео — картинки которые я захочу? Например простой скриншот как выглядит видео — чтобы не смотрелись криво?
Вот мой сайт на котором я все это делал: https://smart-protect.com.ua/
видео отзывы почти в низу
буду очень благодарен за помощь
Спасибо, всё работает хорошо!
Есть пара но:
1) В js код надо добавить к ссылке на подгрузку превьюшки s, чтобы получилось https… А то ssl сертификат начинает ругаться.
2) Так и не понял почему не подгружается вторая превьюшка, если на одной странице 2 видео.
Почему то при клике сразу не включается видео (
как это возможно исправить ?
Тоже интересует этот вопрос. Пролистал комменты.., несколько человек спрашивали про это, но им никто не ответил.
На смартфонах и хроме сейчас нужно кликнуть 2 раза для воспроизведения, что автоматически делает данный метод абсолютно не актуальным по понятным причинам. Неужели за годы никто так и не смог решить данную критическую ошибку?
У всех у кого не воспроизводится с первого нажатия добавьте
iframe.setAttribute(«allow»,’accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture’);
Какой то у вас странный код, вы уверены, что именно в таком виде он должен быть?
вот так надо iframe.setAttribute(«allow»,’accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture’);
Здравствуйте! Большое спасибо за статью!
Можно мне задать пару вопросов по мобильной версии?
1. Как поместить видео на саму страницу сайта так, чтобы оно не загружалось в отдельном окне, а крутилось именно на сайте ?
2. Как убрать все элементы от ютуба (стрелки, иконки и т.п.) ?
3. В итоге нужно чтобы видеоролик просто автоматически крутился на сайте и все.))
Не могли бы вы написать код?
Очень вас благодарю!
Добрый день!
Чтобы сделать просто ролик, без элементов управления лучше использовать Vimeo видеохостинг.
Не запускается автоматом видео ((( надо 2 раза нажимать, это можно как то профиксить ?
да. нужно после
if (this.getAttribute(«data-params»)) iframe_url += ‘&’ + this.getAttribute(«data-params»);
дописать:
iframe.setAttribute(«allow»,’accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture’);
Здравствуйте Юрий. Очень хороший код. Работает идеально. Но есть проблема. Дело в том, что изначальная задача у меня была поменять превью на то, которое находится в файлах сервера. Потому что по неведомой для меня причине, ютуб херит качество превью в 2 или 3 раза. Я немного поменял пару строк в js коде:
// Находим постер для видео, зная ID нашего видео
videos[i].style.backgroundImage = ‘url(../images/master.jpg)’;
Но теперь превью слишком большое и под него явно не был рассчитан css код. Подскажите пожалуйста что нужно сделать, чтобы адаптировать превью?
После этой строчки
// Находим постер для видео, зная ID нашего видео
videos[i].style.backgroundImage = ‘url(../images/master.jpg)’;
вставил эту строчку:
videos[i].style.backgroundSize = ‘contain’;
и картинку стало заполнять как надо
Здравствуйте, реализовала встраивание видео по Вашему примеру. Всё отлично, только есть одно но! В мобильной версии, картинка видео и само видео появляется примерно через 1,5-2 минуты после загрузки всей страницы. В веб версии такого нет, видео подгружается практически сразу. В чем может быть проблема и как это исправить? Вот пример страницы: https://semidey.com.ua/recept-bananovyie-oladi_319
Заранее спасибо за совет.
прошу прощения, вопрос закрыт. Проблема решена.
а как решили проблему и адресован ли был вопрос мне? уведомление почему-то пришло мне.