Рассмотрим как быстро сделать так, чтобы все публикуемые видеоролики в WordPress были адаптивными.
А вы в курсе, что уже давно с 2015 года Google начал понижать в выдаче сайты не оптимизированные под отображение на мобильных устройствах? Это было вполне предсказуемо, ведь доля мобильного трафика неимоверно растет во всех тематиках.
Как следствие, сейчас большинство сайтов с адаптивной версткой. Но и в них бывают упущения и видио может работать в неадаптивном режиме. Да и не стоит забывать о людях которые сидят на своих старых, но горячо любимых шаблонах. Поэтому данный совет им будет полезен.
Как в WordPress сделать видео на всю ширину страницы?
Для этого воспользуемся небольшим сниппетом. Его смысл заключается в том, что код вывода видео оборачивается в контейнер. Для которого задается соответствующий стиль.
Правки вносим в файл functions.php вашей активной темы. Допишем в него следующий PHP-код:
Так же не забываем про стили, добавляем эти CSS к своему шаблону:
Вот и все! Теперь все видео вставляемое на страницы вашего WordPress с помощью тэгов IFRAME, OBJECT, EMBED и VIDEO (HTML5) будет вписываться в стилизованный адаптивный контейнер.
А вы в курсе, что уже давно с 2015 года Google начал понижать в выдаче сайты не оптимизированные под отображение на мобильных устройствах? Это было вполне предсказуемо, ведь доля мобильного трафика неимоверно растет во всех тематиках.
Как следствие, сейчас большинство сайтов с адаптивной версткой. Но и в них бывают упущения и видио может работать в неадаптивном режиме. Да и не стоит забывать о людях которые сидят на своих старых, но горячо любимых шаблонах. Поэтому данный совет им будет полезен.
Как в WordPress сделать видео на всю ширину страницы?
Для этого воспользуемся небольшим сниппетом. Его смысл заключается в том, что код вывода видео оборачивается в контейнер. Для которого задается соответствующий стиль.
Правки вносим в файл functions.php вашей активной темы. Допишем в него следующий PHP-код:
PHP:
function div_wrapper($content) {
// match any iframes
$pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
preg_match_all($pattern, $content, $matches);
foreach ($matches[0] as $match) {
// wrap matched iframe with div
$wrappedframe = '<div class="video-container" >' . $match . '</div>';
//replace original iframe with new in content
$content = str_replace($match, $wrappedframe, $content);
}
return $content;
}
add_filter('the_content', 'div_wrapper');
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) будет вписываться в стилизованный адаптивный контейнер.
