Как сделать отложенную загрузку YouTube видео на сайте

В этой статье я расскажу, как сделать на странице сайта отложенную загрузку встроенного видео от видеохостинга YouTube.
РЕПОСТ:

Когда вы на странице сайта встраиваете видео с YouTube, скорость загрузки и отображения этой страницы становится ниже. Проблема возникает не из-за самого видео, а из-за размера JavaScript файла, который подгружается для воспроизведения видео. Пока этот JS файл не загрузится, отрисовка страницы «ставится на паузу».

Избавиться от этого негативного эффекта можно сделав отложенную загрузку видео (еще ее называют «ленивой» загрузкой). Благодаря отложенной загрузке видео, браузер будет в первую очередь загружать необходимые для отрисовки страницы файлы, что положительно скажется на скорости отображения страницы в целом.

Как добавить отложенную загрузку видео YouTube

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

Наш js-код:

<script>
function init() {
var vidDefer = document.getElementsByTagName(‘iframe’);
for (var i=0; i<vidDefer.length; i++) {
    if(vidDefer[i].getAttribute(‘data-src’)) {
        vidDefer[i].setAttribute(‘src’,vidDefer[i].getAttribute(‘data-src’));
        }
    } 
}
window.onload = init;
</script>

Данный код необходимо разместить на странице вашего сайта с видео. Если вы используете WordPress, то поместите этот скрипт в подвал сайта перед закрывающим тегом </body>.

Теперь можно добавлять и html код видео:

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/ваше_видео" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Как я ранее и говорил, в данный код внесено одно небольшое, но очень важное изменение - атрибут src заменен на data-src. Будьте здесь очень внимательны!

Если вы сделали все правильно, то добавленное YouTube видео на вашем сайте теперь будет работать в режиме отложенной загрузки.

Автор
Сергей Дугин
Фрилансер со стажем. Занимаюсь разработкой сайтов на WordPress и WooCommerce. В своей работе активно использую Elementor и его производные решения. Оказываю консультации и провожу обучающие занятия по перечисленным продуктам.
Похожие записи
Комментарии
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
calendar-fullbubblecrossmenu