Video.js实现视频填满Div无黑边，控制栏匹配视频宽度

问题现象 #

使用vjs-fill模式时出现两个问题：

• 视频左右两侧出现黑边，无法填满容器可用区域
• 控制栏宽度拉满容器100%，没有和视频实际宽度对齐

需求目标 #

视频按原始比例填满容器可用区域，但不超过自身原始尺寸；同时避免垂直滚动，因此不使用fluid选项。

解决方案 #

1. 移除vjs-fill类，改用自定义样式控制缩放

vjs-fill会强制播放器填满容器，忽略视频原始比例导致黑边。我们需要让视频按比例自适应，同时限制最大尺寸为原始分辨率。

2. 容器与播放器样式调整

通过CSS设置容器的溢出隐藏和居中布局，同时给播放器设置最大宽高限制，确保视频缩放不超限。

3. 控制栏宽度对齐

调整控制栏样式，让它自动跟随视频的实际宽度，避免超出视频范围。

修改后的完整代码 #

<script src="https://unpkg.com/video.js/dist/video.js"></script>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"/>

<style>
  .video-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .video-js {
    max-width: 1280px; /* 替换为你的视频原始宽度 */
    max-height: 720px; /* 替换为你的视频原始高度 */
    width: auto !important;
    height: auto !important;
  }
  .video-js .vjs-control-bar {
    width: 100% !important;
    left: 0 !important;
  }
</style>

<div class="video-container">
  <video id="my_video" class="video-js" controls muted preload="auto" data-setup='{"fluid": false}'>
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
</div>

动态获取视频原始尺寸（可选） #

如果不清楚视频的原始宽高，可以用JS动态获取后设置给播放器：

document.addEventListener('DOMContentLoaded', function() {
  const videoElement = document.querySelector('#my_video');
  const player = videojs('my_video');
  
  videoElement.addEventListener('loadedmetadata', function() {
    const naturalWidth = videoElement.videoWidth;
    const naturalHeight = videoElement.videoHeight;
    player.el().style.maxWidth = `${naturalWidth}px`;
    player.el().style.maxHeight = `${naturalHeight}px`;
  });
});

内容的提问来源于stack exchange，提问作者Toniq