我已经使用 video.js 一段时间了，正在寻找响应式解决方案。我看到 4.6 声称是这样，但无法开始工作。我在文档中找不到任何关于使其响应的内容。我基本上只需要它保持在容器的 100% 并保持其纵横比。如果我关闭宽度/高度，它默认很小。 100% 将适用于宽度，但不确定高度该放什么。试图在视频标签的 id 上使用 CSS，没有奏效。

daverupert.com 方法适用于旧版本的 video.js，但不适用于 4.6。

如果它被记录在某个地方，那么链接或有关其他人如何使 video.js 4.6 响应的任何想法都会有所帮助。

此外，加载动画没有显示。

请您参考如下方法:

这是我用于所有响应式播放器的代码。

首先添加一个响应式包装器

<div class="video-js-responsive-container vjs-hd"> 
    <video .... standard videojs code ... > 
        ... sources ... 
    </video> 
</div> 

我使用 vjs-hd 和 vjs-sd 来区分 16:9 和 4:3

然后为它设置类和 css

.video-js-responsive-container.vjs-hd { 
    padding-top: 56.25%; 
} 
.video-js-responsive-container.vjs-sd { 
    padding-top: 75%; 
} 
.video-js-responsive-container { 
    width: 100%; 
    position: relative; 
} 
.video-js-responsive-container .video-js { 
    height: 100% !important;  
    width: 100% !important; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

我知道使用 !important不受欢迎，但在覆盖其他 css 类时它是可靠的。

包装类 video-js-resonsive-container将自动将其大小调整为父容器的 100%，同时保持高度与宽度的比例。

改编自: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php