# Добавляем iframe видео с ВК и RuTube в fancybox

Fancybox и так поддерживает видео с YouTube и прочих зарубежных площадок, задача состоит в том, чтобы добавить в Wordpress тему в связке с fancybox поддержку наших площадок

- Адрес: https://romuskras.net/blog/dobavlyaem-iframe-video-s-vk-i-rutube-v-fancybox
- Опубликовано: 2026-03-17
- Обновлено: 2026-04-12
- Автор: Romus
- Категории: Сайты
- Теги: wordpress, php, fancybox, video, widgets, rutube, vkiframe, acfplugin
- Чтение: 3 мин чтения

![Добавляем iframe видео с ВК и RuTube в fancybox](https://romuskras.net/uploads/posts/2026/69b99c3887e6d_1773771832.jpg)

---

Мы собираемся добавить поддержку iframe-видео одном из разделов сайта в купленной Wordpress-теме, конкретнее: добавить поддержку поля video → iframe (плагин ACF для Wordpress) наряду с уже существующим полем в video под названием link.

В шаблоне есть отдельно файл карточки сущности в списке этих сущностей, часть, отвечающая за видео:

```php
<?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
<?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-шаблон), тут мы меняем код

```php
<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
<?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 классы. Вместо

```javascript
document.querySelector('.video-btn')
```

в таком случае пишут

```javascript
document.querySelector('[videoBtn_JS]')
```

Это в какой-то мере правильно в контексте разделения ответственности. CSS классы отвечают за стили, а такие атрибуты отвечают за поведения. Также, если переименуем класс - JS не сломается. Также повышается читаемость, ведь видно, что этот элемент используется в скрипте. По всему шаблону используется именно такой подход.

Ну и наконец корректируем стили CSS, убираем лишние отступы, корректируем размер попапа на телефоне:

```css
/* Fancybox v5 */
.fancybox__slide--iframe .fancybox__content {
    background: #000 !important;
    padding: 0 !important;
}
.fancybox__iframe {
    border: none !important;
}

/* Fancybox v3 */
.fancybox-slide--iframe .fancybox-content {
    background: #000 !important;
    padding: 0 !important;
}
.fancybox-iframe {
    border: none !important;
}
```

Используйте вариант, соответствующий вашей версии Fancybox в теме дизайна, нам подошли стили от v5. В любом случае легко проверить стили инспектором элементов в браузере, еще легче поправить эти стили в кастомных стилях шаблона (хотя в нашем случае для этого есть отдельный платный плагин, идущий в комплекте с темой дизайна).