Responsive video — Отзывчивый видео плеер WordPress без плагинов

На проекте jff.by пришло время делать адаптивный дизайн. Т.к. сайт о кино, то логично, что на нем есть видеоплеер. Я использовал стандартный видеоплеер WordPress, но вот беда — плеер не адаптивный и с этим надо что-то делать!

Адаптивный в данном случае значит, что размеры плеер должны подстраиваться под размеры экрана устройства, с которого зашли на сайт.

Для этих целей я попробовал устанавливать дополнительные плагины, но они мне не подходили, часть из них просто не работали, а часть мне не нравилась.

Не долгий поиск по просторам интернета и решение было найдено.

В файл стилей, обычно это style.css, добавьте следующий код:

.mejs-container {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

Пример использования этого кода вы можете увидеть на сайте http://jff.by

Если вас интересует, как сделать резиновыми и другие элементы WordPress вы можете почитать эту статью 

PS в WordPress 4.0 обновилась версия плеера и теперь достаточно в файл style.css, добавьте следующий код:

.wp-video {
	margin: 0 auto;
	height: auto !important;
}
video {
	height: auto !important;
}

 

Leave a Comment