Показ изображения вместо плагина видео youtube

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

На сайте ссылка на видео хранится в свойстве 'YOUTUBE' : https://www.youtube.com/embed/LKmk4oinPvQ

Если свойство 'YOUTUBE_SCRIN', где должна лежать картинка видео, пустое, то получим его с youtube и сохраним в свойство. Если же, свойство установлено, то отобразим картинку.

// $arResult['PROPERTIES']['YOUTUBE']['VALUE'] = https://www.youtube.com/embed/LKmk4oinPvQ;
//
$srcY=preg_replace("#https:\/\/www\.youtube\.com\/embed\/#","",$arResult['PROPERTIES']['YOUTUBE']['VALUE']);
if(!empty($arResult['PROPERTIES']['YOUTUBE_SCRIN']['VALUE']))
{												
	$arPhotoSmall = CFile::ResizeImageGet(
		$arResult['PROPERTIES']['YOUTUBE_SCRIN']['VALUE'], 
		array('width'=>450,'height'=>285), 
		BX_RESIZE_IMAGE_EXACT,
		Array()
		);
	?>
	<div class="youtube-block" data-code="<?=$srcY;?>" >
	<img src="<?=$arPhotoSmall['src']?>" />
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>
</div>
												
	<?
	}
	else
	{
		$YOUTUBE_SCRIN = CFile::MakeFileArray("https://img.youtube.com/vi/".$srcY."/hqdefault.jpg");

		if (!empty($YOUTUBE_SCRIN)) {
			CIBlockElement::SetPropertyValuesEx($arResult['ID'], 2, array('YOUTUBE_SCRIN' => $YOUTUBE_SCRIN));
		}
		?>
			<div class="youtube-block" data-code="<?=$srcY;?>">
			<img src="<?=$arPhotoSmall['src']?>" />
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>
			</div>

		<?
	}

Теперь с помощью js настроим событие 'click', но нажатию на картинку, в блок будет устанавливаться iframe.

$(document).ready(function () {
		$(document).on('click', '.youtube-block', function () {	

			$(".youtube-block").html('<iframe height="285" src="https://www.youtube.com/embed/'+$(this).data('code')+'?autoplay=1&mute=1&autohide=1&border=0&wmode=opaque&enablejsapi=1" style="border:none;width: 100%" allowfullscreen></iframe>');

		});	
});	

Стили для блока:

.youtube-block{position:relative;width:100%;height:auto; text-align:center;cursor:pointer;}
.youtube-block svg{position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    margin-top: -24px;
    margin-left: -34px;} 
.youtube-block:hover .ytp-large-play-button-bg{fill: #f00}		
.ytp-large-play-button-bg {
    -webkit-transition: fill .1s cubic-bezier(0.4,0,1,1),fill-opacity .1s cubic-bezier(0.4,0,1,1);
    transition: fill .1s cubic-bezier(0.4,0,1,1),fill-opacity .1s cubic-bezier(0.4,0,1,1);
    fill: #212121;
    fill-opacity: .8;
}

Пример реализации: Обучающее видео "Установка CMS 1С Битрикс на хостинге Timeweb"