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

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

25 мая 2015 220

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

Reg.ru: Неограниченный бесплатный трафик
Reg.ru: Неограниченный бесплатный трафик

Как следствие, сайтов с адаптивной версткой становится все больше и больше. Вы могли заметить, что на популярных стоках практически все новые шаблоны 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.

Jetpack by WordPress.com

— плагин от разработчиков WordPress, который добавит вашему сайту широчайший набор дополнительного и полезного функционала, ранее доступного лишь пользователям WordPress.com.

  Скачать

Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе WordPress.

Комментарии

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее