Адаптивное видео в Вордпресс без использования плагинов

А вы в курсе, что с 21 апреля Google начал понижать в выдаче сайты не оптимизированные под отображение на мобильных устройствах? Это было вполне предсказуемо, доля мобильного трафика неимоверно растет во всех тематиках.

Как следствие, сайтов с адаптивной версткой становится все больше и больше. Вы могли заметить, что на популярных стоках практически все новые шаблоны WordPress имеют адаптивную верстку.

Адаптивная верстка при всех своих очевидных преимуществах имеет целый ряд нюансов, которые могут периодически о себе напоминать. Например, мне на днях пришлось столкнуться с тем, что WordPress по-дефолту вставлял на страницу видео фиксированного размера. Мне же требовалось вписать видео в 100% ширину резиновой страницы. В связи с чем встал логичный вопрос.

Как в WordPress сделать видео на всю ширину страницы?

Для этого воспользуемся небольшим сниппетом. Его смысл заключается в том, что код вывода видео оборачивается в контейнер. Для которого задается соответствующий стиль.

Изменениям традиционно подвергнется файл functions.php вашей активной темы. Допишем в него следующий PHP-код:

/* Добавляем адаптивный контейнер для видео */
function alx_embed_html( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Поддержка Jetpack

Теперь зададим стиль контейнера.

Можно дописать эти строки в файл style.css вашей темы, но лучше задать их в соответствующих настройках вашего шаблона. Если таковые, конечно, имеются. Обычно это раздел Custom CSS или что-то в этом духе.

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

Вот и все! Теперь все видео вставляемое на страницы вашего WordPress с помощью тэгов IFRAME, OBJECT, EMBED и VIDEO (HTML5) будет вписываться в стилизованный адаптивный контейнер.

Обратите внимание, сниппет совместим с популярным плагином Jetpack.