How to make native video player full width?

Question

This is what I have now: 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%?

Answer 1

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;
}

Answer 2

It's simple with Wordpress 5

Just add the following CSS:

.wp-video { width: 100% !important }
.wp-video video { width: 100% !important; height: 100% !important; }

Answer 3

I know this comes a bit late but I going to leave here in case some one needs a different alternative from the above answer.

We add the function below to our theme most probably under functions.php or any other included file. The function below wraps the oembed inside the video-container div and below function is the respective CSS for the new class

/**
* Add Response code to video embeds in WordPress
*
*/
function ns_embed_html( $html ) {

  return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'ns_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'ns_embed_html' ); // Jetpack

// CSS 
.video-container {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   max-width: 1200px;
   margin: 0 auto;
 }

 .video-container iframe, .video-container object, .video-container embed, .video-container video {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
 }