Долгая загрузка страницы с Youtube видео
Если встраивать youtube видео напрямую в страницу через редактор wordpress гутенберг или просто через iframe, то каждое видео будет тянуть за собой тонну скриптов тормозя загрузку страницы, поэтому одним из способов решить эту проблему это воспользоваться плагином:
Но если вы сами разрабатываете шаблон wordpress и хотите, чтобы все было под вашим контролем без использования плагинов, то смотрите решение ниже
Считаю, что наиболее правильным будет использовать попап для открытия видео, т.к. в таком случае мы не зависим от ширины контейнера с контентом
// Получить id youtube видео
function get_youtube_id($youtube_video_url) {
$url = $youtube_video_url;
$urls = parse_url($url);
// Если ссылка вида http://youtu.be/abcd, where abcd is the video ID
if ($urls['host'] == 'youtu.be') :
$imgPath = ltrim($urls['path'],'/');
// Если ссылка вида http://www.youtube.com/embed/abcd
elseif (strpos($urls['path'],'embed') == 1) :
$imgPath = end(explode('/',$urls['path']));
// Если просто id
elseif (strpos($url,'/') === false):
$imgPath = $url;
// Если ссылка вида http://www.youtube.com/watch?v=abvgd
else :
parse_str($urls['query']);
$imgPath = $v;
endif;
return $imgPath;
}
Удобный сниппет, чтобы получить айди ютюб видео из любой ссылки, я использую его в паре с плагином произвольных полей ACF
Чтобы получить превью видео 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
Из названия файлов уже можно понять о размерах миниатюр, достаточно взять нужную ссылку подставить туда id, пример

Теперь достаточно сделать html разметку нужного нам блока под видео, и воспользоваться функциями, которые я привел выше в статье, должно получиться что-то вроде этого:
<a href="<?php the_field('video'); ?>" class="video">
<img src="https://img.youtube.com/vi/<?php echo get_youtube_path(get_field('video')); ?>/maxresdefault.jpg" alt="">
</a>
Сейчас заместо iframe’а у нас будет грузится только миниатюра с ютюб, дальше все зависит от вашей реализации, можно подключить попап, можно просто по ссылке и смотреть на ютюбе, а можно подгружать айфрем при клике
Вывод
На самом деле есть куча способов облегчить страницу, я лишь привел два, один при помощи плагина, другой через код. Браузеры не стоят на месте, так что еще как вариант это использоваться атрибут loading=»lazy» или любой сркипт, который поддерживает ленивую загрузку iframe