Как вставить видео в 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 шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,90 из 7, голосов - 48)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress (4,42 из 7, голосов - 31)
- Плагин TinyMCE Advanced – wordpress текстовый редактор (6,35 из 7, голосов - 20)
- Рубрики и категории wordpress, функция wp_list_categories (6,05 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
ЮлагоДарю, очень полезная статья! Буду теперь знать как встроить видео с ютуба на свой блог!
Гугл требует к тегу iframe добавлять атрибут title=»Название ролика», а гугл нужно слушаться.