Видео с YouTube в слайдере фотографий карточки товара

Для интернет-магазина контактных линз Lens4u мы реализовали возможность просмотра видео с YouTube непосредственно в слайдере фотографий. Существует Youtube API, которое позволяет делать практически любые вещи связанные с выводом видео, но как правило реализация посредством API - довольно трудоемка, решили пойти простым путем.

Идея

Каждое видео в YouTube имеет символьный код:
746aabafccff31ac21836fcb1e641467.png
Зная код, можно получить картинку видео для отображения в миниатюрах слайдера и сформировать ссылку для iframe который можно выводить как в слайдере-карусели, так и в всплывающем окне (например, fancybox).

Реализация

1. Создаем множественное свойство инфоблока - для символьных кодов видео:
1e5600c9258435851a98431570e52b2d.png

2. Формируем данные видео (ссылки для iframe и изображения-миниатюры), в result_modifier.php шаблона компонента catalog.element:

Превью изображения видео доступны по ссылке https://i.ytimg.com/vi/[символьный_код_видео]/hqdefault.jpg, а URL плеера для iframe - по ссылке https://www.youtube.com/embed/[символьный_код_видео]. Сформируем на основе этих данных массив для вывода в template.php:
 foreach($arResult["PROPERTIES"]["YOUTUBE"]["VALUE"] as $youtube_id) {
   $arResult["PROPERTIES"]["MORE_PHOTO"]["PREVIEW_IMG"][$youtube_id] = array(
      'SRC' => 'https://i.ytimg.com/vi/'.$youtube_id.'/hqdefault.jpg',
   ); 
   $arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"][$youtube_id] = '<iframe width="100%" height="460" src="https://www.youtube.com/embed/'.$youtube_id.'" frameborder="0" allowfullscreen></iframe>';
}
3. Выводим видео в шаблоне карточки товара вместе с дополнительными изображениями товара в слайдере-карусели:
<?foreach($arResult['PROPERTIES']['MORE_PHOTO']['VALUE'] as $k=>$fid):?>
   <?if(is_numeric($fid)): //Фото?>
      <a class="product__slider__item item js-fancybox background_contain" data-fancybox-group="group1" href="<?=CFile::GetPath($fid)?>" title="<?=$arResult['NAME']?>">
         <img src="#" data-src="<?=CFile::GetPath($fid)?>" alt="<?=$arResult['NAME']?>" class="js-img-background">
      </a>
   <?else: //Видео?>
      <a class="product__slider__item item js-fancybox background_contain" data-fancybox-group="group1" href="#<?=$k?>" title="<?=$arResult['NAME']?>" style="padding:0">
         <?=$fid?>
      </a>
      <div style="display:none"><div id="<?=$k?>" style="width:620px">
         <?=$fid?>
      </div></div>
   <?endif?>
<?endforeach?>

4. Добавим немного CSS - получаем красивый слайдер, в котором выводятся как фотографии, так и видео:
905ce55405b1b0155025fb810d939bcf.png
В целом, ничего сложного. Также можно добавить в result_modifier.php - копирование и, при необходимости, ресайз превью-изображений видео на хостинг сайта, чтобы перестраховаться на тот случай, если Youtube решит изменить формат ссылок превью.