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

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

25 мая 2015 4

Рассказываю, как быстро сделать так, чтобы все публикуемые видеоролики в Вордпресс были адаптивными.

А вы в курсе, что с 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.

Jetpack by WordPress.com

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

  Скачать

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

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

ПОДПИСАТЬСЯ

Комментарии
  1. Здравствуйте!

    Почему-то не оборачивает код в необходимый блок. У вас все работает? Просто пользуюсь таким CSS-кодом давно, только вот приходится прописывать блок в ручную (точнее по кнопке в редакторе оборачиваю).

Добавить комментарий

Лидер среди российских регистраторов доменных имён и хостинг-провадейров