Как вставить видео в WordPress c Youtube + хак для адаптивности
Недавно нашел интересный хак, который позволяет автоматически вставлять адаптивное Youtube видео в WordPress, и я решил написать про него небольшой пост. Сам сниппет достаточно простой, поэтому попутно расскажу о других нюансах, возникающих при добавлении видеороликов в качестве контента в Вордпресс. Причем рассмотрю как работу со старым редактором (который многие все еще юзают), так и с новым. Есть вероятность, что во втором случае хак может не пригодиться, но без дополнительных CSS/HTML все равно не обойтись.
Простая вставка видео с Youtube в WordPress
Прошлая версия текстового редактора имела одну интересную и полезную для новичков фишку – вы могли просто вставить URL-адрес ролика с Ютуба и система автоматически преобразовывала его в видео. Приблизительно вот так:
Даже когда пользователь добавляет ссылку в HTML режиме, то данная опция все равно срабатывает, хотя результат и виден только после сохранения страницы/записи.
В новом редакторе Gutenberg работать с видео, казалось бы, тоже достаточно легко, но у мня почему-то не получается. Итак, мы выбираем в блоках вкладку «Вставки», где находим пункт «Youtube». Далее в специальное поле просто указываем линк на нужный видос.
На 3х разных сайтах, подставляя несколько ссылок, я все равно вижу это сообщение о том, что содержимое не может быть встроено. Возможно, надо делать какую-то доп.настройку или у меня что-то отключено — хз. Поэтому приходится выполнять все как описано ниже.
Универсальное добавление Youtube видео через HTML
Метод подходит для любых сайтов, причем не только на Вордпресс. Принцип работы такой:
- Внизу под видеороликом с Ютуба (и других сервисов) вы можете найти ссылку «Поделиться», при клике на которую появится всплывающее окно с разными вариантами шеринга.
- Вам нужен самый первый под названием «Встроить» – после нажатия появится окно с HTML-кодом интеграции на сайт и некоторыми настройками.
- Просто копируете приведенный здесь HTML-код и внедряете его на свой веб-ресурс.
Чтобы вставить видео в старый редактор обязательно надо переключиться в «HTML» режим. После этого при желании можно вернуться в «Визуальный» – видео подгрузится автоматически.
В Gutenberg`е для этой задачи используется блок «HTML-код» из группы «Форматирование». На странице появится специально поле, куда следует добавить скопированный с Youtube код. Все предельно просто.
Адаптивное видео c Youtube на WordPress
Наконец-то мы дошли до основной темы статьи. В начале немного общей «теории». Чтобы получить адаптивность видеоролика с Ютуба вам нужно сделать 2 вещи:
1. Во-первых, надо «обернуть» код вставки внешним DIV блоком, например:
<div class="youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/KiS8rZBeIO0" frameborder="0" allowfullscreen></iframe> </div> |
2. Во-вторых, потребуется дополнить файл стилей следующими строками:
.youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Внимание! Если вы не хотите, чтобы видеоролик растягивался на 100% в браузере на десктопном ПК, а лишь на планшетах/смартфонах, то из базового варианта можно убрать 100%-нтные свойства width/height и перенести их в блок:
@media screen and (max-width: 767px) { .youtube iframe { width: 100%; height: 100%; } } |
В данном случае изначально у Ютуб-ролика размеры будут использоваться, обозначенные в коде, и лишь на экранах меньше 768 пикселей – растянутся на всю ширину.
Добавление адаптивности и специальный хак
Со стилями все просто – их вносите в style.css и т.п. Что касается «обертывания» в DIV, то опять же при вставке кода в HTML режиме с этим проблем никаких нет – вы вручную к исходному варианту с Ютуба дописываете нужный внешний DIV (не забудьте его закрыть после). Либо в новом редакторе можно класс указать в доп.настройках.
Если хотите автоматизировать часть процесса, то добавление внешнего DIV можно сделать автоматически – для этого в файле функций прописываем:
add_filter('the_content', 'filter_iframe'); function filter_iframe($html){ $html = preg_replace('/<iframe (.*?)>(.*?)<\/iframe\>/is', '<div class="youtube"><iframe $1>$2</iframe></div>', $html); return $html; } |
С помощью этого сниппета все iframe в блоке контента обертываются во внешний блок с нужным нам стилем.
Однако в данном случае следует учитывать, что в тексте «обрабатываются» абсолютно все iframe-элементы, например те же Google Карты и другие объекты. Также следует заметить, что фишку я пока тестил только в старом редакторе, в Gutenberg еще не доводилось.
комментария 2 к статье “Как вставить видео в WordPress c Youtube + хак для адаптивности”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Вкладки в Woocommerce товарах — как убрать, добавить, изменить (сниппеты + плагин)
- Вывод Woocommerce товаров на странице с Elementor с помощью плагина
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress
- Хаки для страницы категории в WooCommerce
- Топ-5 плагинов для обеспечения безопасности WordPress сайтов
- Friend Hosting — создание WP сайта в один клик, обзор панели управления и плюсов хостера
- Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние
- WooCommerce (44)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (244)
- Сервисы (85)
- Хаки и секреты (87)
- Шаблоны (44)
- Записи и посты wordpress, оформление записи
(5,91 из 7, голосов - 47)
- Умный копирайт в footer.php для wordpress
(5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений
(5,13 из 7, голосов - 30)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress
(4,08 из 7, голосов - 36)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress
(4,33 из 7, голосов - 30)
- Рубрики и категории wordpress, функция wp_list_categories
(6,05 из 7, голосов - 20)
- Иконки в меню WordPress — добавляем вручную и с плагином
(4,75 из 7, голосов - 24)

- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Топ-3 видеокарты среднего класса от AMD: зачем платить больше?
- Доработка фильтра для повышения конферсии
- Зачем нужен домен
- Переваги застосування технології розумний будинок
- Дизайн сайта
- DLE (DataLife Engine) — движок для сателлитов
- Играть бесплатно в игровые автоматы без регистрации
- Продвижение сайта через социальные сети
ЮлагоДарю, очень полезная статья! Буду теперь знать как встроить видео с ютуба на свой блог!
Гугл требует к тегу iframe добавлять атрибут title=»Название ролика», а гугл нужно слушаться.