Задача добавить на страницу сайта под управлением WordPress видео размещенное на одном из популярных видеохостингах так, чтобы ширина видео соответствовала бы 100% ширине страницы, независимо от размеров монитора пользователя. Казалось бы тривиальная задача, котороя должна быть по умолчанию в базовом функционале, но нет. Исправляем данный казус за 3 минуты.
Как сделать видео во всю ширину страницы?
Для начала ищем на сервере файл functions.php (обычно лежит по адресу wp-content/themes/), после чего в любом месте вставляем php-код:
|
1 2 3 4 5 6 7 |
/* Добавляем адаптивный контейнер для видео */ 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:
|
1 2 3 |
.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, EMBED, OBJECT или VIDEO (HTML5) нужное вам видео будет вставляться по всей ширине «резиновой» страницы.
Собственно это все, я ведь обещал, что это займет 3 минуты.