Долгая загрузка страницы с Youtube видео

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

Первый вариант (открыть в новом окне)

Самый простой способ решить данную задачу это вставить ютюб видео через обычную ссылку, а в качестве превью задать собственную картинку или использовать миниатюру по ссылке с youtube

Пример:

<a class="youtube-video" target="_blank" href="https://www.youtube.com/watch?v=ESOjt2_yJrU&ab_channel=EpitaphRecords">
    <img src="картинка.png" width="300" height="200">
</a>

Так же нужно добавить иконку play, чтобы пользователь понимал, что это видео, поэтому добавим стилей к нашему блоку с видео:

.youtube-video {
  position: relative;
  display: inline-block;
}
.youtube-video img {
  display:block;
}
/* иконка */
.youtube-video::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjEwMCUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwYXRoIGQ9Ik01MDEuMjk5LDEzMi43NjZjLTUuODg4LC0yMi4wMyAtMjMuMjM0LC0zOS4zNzcgLTQ1LjI2NCwtNDUuMjY0Yy0zOS45MzIsLTEwLjcwMSAtMjAwLjAzNywtMTAuNzAxIC0yMDAuMDM3LC0xMC43MDFjMCwwIC0xNjAuMTA1LDAgLTIwMC4wMzgsMTAuNzAxYy0yMi4wMjUsNS44ODcgLTM5LjM3NiwyMy4yMzQgLTQ1LjI2NCw0NS4yNjRjLTEwLjY5NiwzOS45MjggLTEwLjY5NiwxMjMuMjM2IC0xMC42OTYsMTIzLjIzNmMwLDAgMCw4My4zMDggMTAuNjk2LDEyMy4yMzJjNS44ODgsMjIuMDMgMjMuMjM5LDM5LjM4MSA0NS4yNjQsNDUuMjY4YzM5LjkzMywxMC42OTcgMjAwLjAzOCwxMC42OTcgMjAwLjAzOCwxMC42OTdjMCwwIDE2MC4xMDUsMCAyMDAuMDM3LC0xMC42OTdjMjIuMDMsLTUuODg3IDM5LjM3NiwtMjMuMjM4IDQ1LjI2NCwtNDUuMjY4YzEwLjcwMSwtMzkuOTI0IDEwLjcwMSwtMTIzLjIzMiAxMC43MDEsLTEyMy4yMzJjMCwwIDAsLTgzLjMwOCAtMTAuNzAxLC0xMjMuMjM2WiIgc3R5bGU9ImZpbGw6I2VkMWYyNDtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNMjA0Ljc5NiwzMzIuODAzbDEzMy4wMTgsLTc2LjgwMWwtMTMzLjAxOCwtNzYuODAxbDAsMTUzLjYwMloiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1ydWxlOm5vbnplcm87Ii8+PC9nPjwvc3ZnPg==);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

Результат:

Теперь сайт не будет тащить за собой ютюб плеер и страница при загрузке не будет тормозить

Чтобы получить превью видео youtube, можно воспользоваться следующими ссылками

https://i1.ytimg.com/vi/<айди-видео>/default.jpg
https://i1.ytimg.com/vi/<айди-видео>/mqdefault.jpg
https://i1.ytimg.com/vi/<айди-видео>/hqdefault.jpg
https://i1.ytimg.com/vi/<айди-видео>/sddefault.jpg

Из названия файлов уже можно понять о размерах миниатюр (mq, hq, sd), достаточно взять нужную ссылку подставить туда id, пример

https://i1.ytimg.com/vi/nNaPh8aaGH0/sddefault.jpg

Второй способ (вывод ютюб видео через модальное окно)

Считаю, что наиболее правильным будет использовать модальное окно для открытия видео, так мы не заставляем пользователя переходить на другую вкладку

Делаем простое модальное окно

.modal {
  display: block;
  position: relative;
  max-width: 480px;
  width: 100%;
  height: 100%;
  position:absolute;
  top:0;
  left:0;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  display:none;
}

.modal.active {
  display:block;
}

.modal__close {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.modal__close::before,
.modal__close::after {
  content: "";
  width: 30px;
  height: 3px;
  background-color: #000;
  position: absolute;
  top: 13px;
  transform: rotate(45deg);
}

.modal__close::after {
  transform: rotate(-45deg);
}

.overlay {
  background-color: rgb(0 0 0 / 80%);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
}
.overlay.active {
  display: block;
}

Так же немного jQuery кода, чтобы можно было открывать и закрывать окно и останавливать видео при закрытии:

<script>
  jQuery(function ($) {
    $(".youtube-video").click(function (e) {
      e.preventDefault();
      let video = $(this).attr('href');
      $(".modal iframe").attr("src", video);
      $(".modal, .modal-overlay").toggleClass("active");
      
    });
    $(document).on("click", ".modal__close", function () {
      $(".modal.active iframe").attr('src',''); 
      $(".modal, .modal-overlay").toggleClass("active");  
       
    });
  });
</script>

И само видео. В ссылке есть пару важных параметров, которые вы можете настроить под себя, установив в них 0 или 1 https://www.youtube.com/embed/ESOjt2_yJrU?autoplay=1&mute=0:

<a class="youtube-video" target="_blank" href="https://www.youtube.com/embed/ESOjt2_yJrU?autoplay=1&mute=0">
    <img src="https://kinganton.ru/wp-content/uploads/2023/07/utphoto-1.jpg" width="300" height="200">
</a>

Пример (кликабельно):

Третий вариант (Если вы используете wordpress)

Если встраивать youtube видео напрямую в страницу через редактор wordpress гутенберг или просто через iframe, то каждое видео будет тянуть за собой тонну скриптов тормозя загрузку страницы, поэтому одним из способов решить эту проблему это воспользоваться плагином:

Но если вы сами разрабатываете шаблон wordpress и хотите, чтобы все было под вашим контролем без использования плагинов, то смотрите решение выше

Вывод

На самом деле есть куча способов облегчить страницу, я лишь привел два, один при помощи плагина, другой через код. Браузеры не стоят на месте, так что еще как вариант это использоваться атрибут loading=»lazy» или любой сркипт, который поддерживает ленивую загрузку iframe