Добавляем iframe видео с ВК и RuTube в fancybox
2026-03-17 · Romus · 3 мин чтения · Сайты
Fancybox и так поддерживает видео с YouTube и прочих зарубежных площадок, задача состоит в том, чтобы добавить в Wordpress тему в связке с fancybox поддержку наших площадок
Мы собираемся добавить поддержку iframe-видео одном из разделов сайта в купленной Wordpress-теме, конкретнее: добавить поддержку поля video → iframe (плагин ACF для Wordpress) наряду с уже существующим полем в video под названием link.
В шаблоне есть отдельно файл карточки сущности в списке этих сущностей, часть, отвечающая за видео:
<?php if (get_field('video', $item)['link']):?>
<a href="<?php echo array_values($item_gallery)[0]['img'];?>" data-fancybox="car-item-<?php echo $item->ID;?>">
<img src="<?php echo array_values($item_gallery)[0]['img'];?>" alt="">
<span href="<?php echo get_field('video', $item)['link']?>" data-fancybox class="video">
<img src="<?php echo get_template_directory_uri();?>/assets/img/general/video-icon.svg" alt="">
</span>
</a>
<?php else:?>
Мы заменим код, представленный выше, на версию с поддержкой как ссылки на видео, из которой fancybox автоматически сделает плеер видео с iframe для поддерживаемых популярных зарубежных площадок, на код ниже, который поддерживает также поле iframe:
<?php if (get_field('video', $item)['iframe']):?>
<a href="<?php echo get_field('video', $item)['iframe']?>" data-fancybox data-type="iframe">
<img src="<?php echo array_values($item_gallery)[0]['img'];?>" alt="">
<span class="video">
<img src="<?php echo get_template_directory_uri();?>/assets/img/general/video-icon.svg" alt="">
</span>
</a>
<?php elseif (get_field('video', $item)['link']):?>
<a href="<?php echo array_values($item_gallery)[0]['img'];?>" data-fancybox="car-item-<?php echo $item->ID;?>">
<img src="<?php echo array_values($item_gallery)[0]['img'];?>" alt="">
<span href="<?php echo get_field('video', $item)['link']?>" data-fancybox class="video">
<img src="<?php echo get_template_directory_uri();?>/assets/img/general/video-icon.svg" alt="">
</span>
</a>
<?php else:?>
Получается, что приоритет: iframe → link → без видео. Иконка проигрывания видео вложена внутрь <a> — так она CSS-ом позиционируется поверх картинки.
У нас есть еще шаблон для страницы с одной сущностью (single-шаблон), тут мы меняем код
<a href="<?php echo get_field('video')['link'];?>" data-fancybox="car-article" class="video-btn" videoBtn_JS>
<img src="<?php echo get_template_directory_uri();?>/assets/img/general/video-icon.svg" alt="">
</a>
на код ниже:
<?php $video = get_field('video'); ?>
<?php if ($video['iframe']): ?>
<a href="<?php echo $video['iframe'];?>" data-fancybox data-type="iframe" class="video-btn" videoBtn_JS>
<?php else: ?>
<a href="<?php echo $video['link'];?>" data-fancybox="car-article" class="video-btn" videoBtn_JS>
<?php endif; ?>
<img src="<?php echo get_template_directory_uri();?>/assets/img/general/video-icon.svg" alt="">
</a>
Таким образом мы добиваемся ровно той же функциональности для iframe вставок (вставляем в поле ACF мы именно src из предлагаемого площадками iframe, другой код вставлять не нужно). В будущем можно настроить прокидывание других параметров для iframe вроде автоплея и прочего. Примечательно, что videoBtn_JS тут служит кастомным якорем для JavaScript кода, так скрипт находит нужный элемент, не полагаясь на CSS классы. Вместо
document.querySelector('.video-btn')
в таком случае пишут
document.querySelector('[videoBtn_JS]')
Это в какой-то мере правильно в контексте разделения ответственности. CSS классы отвечают за стили, а такие атрибуты отвечают за поведения. Также, если переименуем класс - JS не сломается. Также повышается читаемость, ведь видно, что этот элемент используется в скрипте. По всему шаблону используется именно такой подход.
Ну и наконец корректируем стили CSS, убираем лишние отступы, корректируем размер попапа на телефоне:
.fancybox__slide--iframe .fancybox__content {
background: #000 !important;
padding: 0 !important;
}
.fancybox__iframe {
border: none !important;
}
.fancybox-slide--iframe .fancybox-content {
background: #000 !important;
padding: 0 !important;
}
.fancybox-iframe {
border: none !important;
}
Используйте вариант, соответствующий вашей версии Fancybox в теме дизайна, нам подошли стили от v5. В любом случае легко проверить стили инспектором элементов в браузере, еще легче поправить эти стили в кастомных стилях шаблона (хотя в нашем случае для этого есть отдельный платный плагин, идущий в комплекте с темой дизайна).