如何让原生视频播放器全宽？

时间：2016-11-07 作者：Azamat

这就是我现在拥有的：enter image description here我希望视频播放器占据整个水平空间，并100%拉伸宽度。视频还应保持灵敏，填满整个视频播放器区域。

我放弃了建议this answer 并将此添加到我的函数中。php：

if ( ! isset( $content_width ) ) {
$content_width = 850; }
我的模板上的内容宽度是850px。但是设置内容宽度没有帮助。

如何使WordPress原生视频播放器宽度达到100%？

3 个回复
最合适的回答,由SO网友:Azamat 整理而成

我把这个加入了我的风格。css和现在的视频播放器是完全响应！

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

SO网友:Gee S

Wordpress 5很简单

只需添加以下CSS：

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

SO网友:Nuno Sarmento

我知道这来得有点晚，但我打算离开这里，以防有人需要与上述答案不同的选择。

我们将下面的函数添加到主题中，很可能是在函数下。php或任何其他包含的文件。下面的函数将oembed包装在视频容器div中，下面的函数是新类的相应CSS

/**
* 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-development   video-player   小码农  

相关推荐