2

This is what I have now: enter image description here I want the video player to take up the whole horizontal space and stretch width 100%. The video should also stay responsive, filling the whole video player area.

I fallowed advice in this answer and added this to my functions.php:

if ( ! isset( $content_width ) ) {
$content_width = 850; }

The content width on my template is 850px. But setting the content width didn't help.

How to make WordPress native video player width 100%?

5

I added this to my style.css and now the video player is fully responsive!

.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load {
    width: 100% !important;
    height: 100% !important;
}
.mejs-container {
    padding-top: 56.25%;
}
.wp-video, video.wp-video-shortcode {
    max-width: 100% !important;
}
video.wp-video-shortcode {
    position: relative;
}
.mejs-mediaelement {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.mejs-controls {
    display: none;
}
.mejs-overlay-play {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
}
  • Wow... I was looking for this. – Md. Zubaer Ahammed Mar 28 '18 at 16:33
  • This is great for horizontal videos, but... What if the video is vertically captured/played? This solution shows a black square with a small video in the container. I know the answer is from 2 years ago. – Geppettvs D'Constanzo Nov 8 '18 at 3:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.