How to make native video player full width?

Question

How to make native video player full width?

Azamat

2020年9月29日 12:52

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%?

Topic video-player theme-development Wordpress

Category Web

Gee S · Accepted Answer · 2020年9月29日 12:52

1

Gee S answered at 2020年9月29日 12:52

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

Nuno Sarmento · Accepted Answer · 2020年9月20日 22:08

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

Azamat · Accepted Answer · 2016年11月12日 07:01

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

How to make native video player full width?

About