При оптимизации сайта желательно исключить все внешние скрипты или сделать их отложенными.
Видео с 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"
10.12.2021
Семен Голиков.