如何在WordPress中嵌入9:16竖屏视频并消除黑边？

方案1：用自定义CSS强制容器为9:16比例 #

WordPress默认的视频容器大概率被主题或核心样式锁死在了16:9比例，你可以通过自定义CSS来修正：

1. 进入WordPress后台「外观」→「自定义」→「额外CSS」
2. 粘贴以下代码：

/* 竖屏视频容器样式 */
.vertical-video-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 177.78%; /* 9:16比例的计算值：16÷9×100% */
  overflow: hidden;
}

.vertical-video-wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让视频填满容器，裁剪超出部分，无黑边 */
}

3. 给你的视频短代码套上这个容器：

<div class="vertical-video-wrap">
[video mp4="example.com/test.mp4" loop="true" autoplay="true" preload="auto"][/video]
</div>

可以删掉短代码里的width和height属性，容器会自动控制尺寸。

方案2：直接用原生HTML5 Video标签 #

如果短代码不好控制，直接用HTML5标签更灵活：

<div style="position: relative; width: 100%; padding-top: 177.78%; overflow: hidden;">
  <video style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
         src="example.com/test.mp4" loop autoplay preload="auto">
  </video>
</div>

object-fit: cover是关键，它会让视频按比例填充容器，自动裁剪多余部分，彻底消除黑边。如果想完整显示视频内容（允许上下留边），可以把cover换成contain，但这样就无法填满容器了。

方案3：排查主题/插件的强制样式 #

有些主题自带视频模块，会强制设置16:9比例，你可以：

• 检查主题设置里的视频相关选项，看是否能切换为9:16
• 临时禁用所有插件，测试是否是插件冲突导致的样式异常

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