最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin8浏览0评论

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

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Nov 7, 2016 at 18:05 AzamatAzamat 3611 gold badge4 silver badges15 bronze badges
Add a comment  | 

3 Answers 3

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%;
 }
发布评论

评论列表(0)

  1. 暂无评论