theme development - How to make native video player full width?

admin管理员组

文章数量:1321246

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

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

• theme-development
• video-player

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Nov 7, 2016 at 18:05 AzamatAzamat 36111 gold badge44 silver badges1515 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 19

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

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

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

本文标签： theme developmentHow to make native video player full width