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

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

Lazy Load for Videos

Но если вы сами разрабатываете шаблон 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