Как сделать отложенную загрузку 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 и его производные решения. Оказываю консультации и провожу обучающие занятия по перечисленным продуктам.
Похожие записи
Изменение отображения цен для вариативных товаров WooCommerce

По умолчанию, если вариативный товар WooCommerce имеет несколько цен, он будет отображаться с диапазоном цен: Но бывают ситуации, когда посетителям...

Oxygen: вывод произвольных полей ACF в записях, рубриках и произвольных таксономиях

Как вывести произвольное поле в Oxygen для записи Вывести произвольное поле для записи в конструкторе Oxygen можно двумя способами: Через...

Как сделать динамический вывод шорткода в Oxygen

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

Как убрать слово Рубрика со страниц рубрик WordPress - лучшее решение

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

Ошибка «Не могу создать директорию wp-content/uploads/» в WordPress

Недавно мне потребовалось сделать перенос WordPress сайта с одного домена на другой. Копия сайта нужна была для последующей её переработки...

11 причин почему стоит выбрать WordPress для вашего сайта

Уверен, что причин использовать WordPress для веб-сайта много, но, исходя из личного опыта, назову 11 основных причин, почему стоит выбрать...

Комментарии
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
calendar-fullbubblecrossmenu