Как вставить видео в WordPress c Youtube + хак для адаптивности

Недавно нашел интересный хак, который позволяет автоматически вставлять адаптивное Youtube видео в WordPress, и я решил написать про него небольшой пост. Сам сниппет достаточно простой, поэтому попутно расскажу о других нюансах, возникающих при добавлении видеороликов в качестве контента в Вордпресс. Причем рассмотрю как работу со старым редактором (который многие все еще юзают), так и с новым. Есть вероятность, что во втором случае хак может не пригодиться, но без дополнительных CSS/HTML все равно не обойтись.

Простая вставка видео с Youtube в WordPress

Прошлая версия текстового редактора имела одну интересную и полезную для новичков фишку – вы могли просто вставить URL-адрес ролика с Ютуба и система автоматически преобразовывала его в видео. Приблизительно вот так:

Даже когда пользователь добавляет ссылку в HTML режиме, то данная опция все равно срабатывает, хотя результат и виден только после сохранения страницы/записи.

В новом редакторе Gutenberg работать с видео, казалось бы, тоже достаточно легко, но у мня почему-то не получается. Итак, мы выбираем в блоках вкладку «Вставки», где находим пункт «Youtube». Далее в специальное поле просто указываем линк на нужный видос.

На 3х разных сайтах, подставляя несколько ссылок, я все равно вижу это сообщение о том, что содержимое не может быть встроено. Возможно, надо делать какую-то доп.настройку или у меня что-то отключено — хз. Поэтому приходится выполнять все как описано ниже.

Универсальное добавление Youtube видео через HTML

Метод подходит для любых сайтов, причем не только на Вордпресс. Принцип работы такой:

1. Внизу под видеороликом с Ютуба (и других сервисов) вы можете найти ссылку «Поделиться», при клике на которую появится всплывающее окно с разными вариантами шеринга.
2. Вам нужен самый первый под названием «Встроить» – после нажатия появится окно с HTML-кодом интеграции на сайт и некоторыми настройками.
3. Просто копируете приведенный здесь 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 еще не доводилось.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 13, средний балл: 4,38 из 7)

Загрузка...

Категории: Возможности; Начинающим; Хаки и секреты;
Теги: адаптивность, видео в блоге, добавление контента, новичкам, сниппеты, улучшаем блог.