如何用JS/CSS为竖版视频制作宽屏背景效果

你需要在横版容器里播放竖版视频时添加模糊宽屏背景，不用转码的话，直接用CSS+JS就能实现和你那串FFmpeg命令一样的效果，具体实现如下：

实现思路 #

用两个相同的视频元素：一个作为全屏模糊背景，另一个作为居中显示的主视频，通过JS同步两者的播放状态，同时根据视频宽高比自动判断是否启用模糊背景（避免横版视频也加背景）。

完整代码示例 #

HTML结构 #

<div class="video-container">
  <!-- 模糊背景视频 -->
  <video class="video-bg" muted playsinline>
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <!-- 主视频 -->
  <video class="video-main" controls playsinline>
    <source src="your-video.mp4" type="video/mp4">
  </video>
</div>

CSS样式 #

.video-container {
  position: relative;
  width: 100%;
  /* 固定16:9横版比例 */
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
}

/* 模糊背景视频样式 */
.video-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 铺满容器，保持比例裁剪 */
  filter: blur(15px); /* 模糊程度，可调整 */
  opacity: 0.8;
}

/* 主视频样式 */
.video-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  /* 竖版视频时限制宽度，保证高度铺满容器 */
  height: 100%;
}

JS逻辑（同步播放+自动适配） #

const container = document.querySelector('.video-container');
const bgVideo = container.querySelector('.video-bg');
const mainVideo = container.querySelector('.video-main');

// 同步两个视频的播放状态
function syncVideos() {
  // 主视频控制背景视频播放/暂停
  mainVideo.addEventListener('play', () => bgVideo.play());
  mainVideo.addEventListener('pause', () => bgVideo.pause());
  mainVideo.addEventListener('seeked', () => {
    bgVideo.currentTime = mainVideo.currentTime;
  });
  // 同步进度条拖动
  mainVideo.addEventListener('timeupdate', () => {
    if (!bgVideo.seeking) {
      bgVideo.currentTime = mainVideo.currentTime;
    }
  });
}

// 检测视频宽高比，判断是否显示模糊背景
function checkVideoRatio() {
  mainVideo.addEventListener('loadedmetadata', () => {
    const videoRatio = mainVideo.videoWidth / mainVideo.videoHeight;
    const containerRatio = 16/9;
    // 如果是竖版视频（视频宽高比 < 容器宽高比），显示背景；否则隐藏
    if (videoRatio < containerRatio) {
      bgVideo.style.display = 'block';
    } else {
      bgVideo.style.display = 'none';
    }
  });
}

// 初始化
syncVideos();
checkVideoRatio();

关键细节说明 #

1. 背景视频的模糊与铺满：用object-fit: cover让背景视频铺满容器，filter: blur(15px)实现模糊效果，模糊值可根据需求调整（对应FFmpeg里的boxblur参数）。
2. 主视频居中：通过绝对定位+transform实现完美居中，设置height:100%保证竖版视频在横版容器里高度铺满，宽度自适应。
3. 自动适配：通过loadedmetadata事件获取视频真实宽高比，只有竖版视频才显示模糊背景，横版视频直接正常播放。
4. 播放同步：保证主视频和背景视频的播放、暂停、进度完全同步，避免出现不同步的情况。

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