如何在WordPress中垂直嵌入YouTube Shorts并修复显示异常？

AI 小北

2026-8-20

解决YouTube Shorts在WordPress中垂直嵌入的问题

方法1：修改嵌入代码参数

右键复制的Shorts默认嵌入代码没有锁定竖屏的参数，你可以手动调整宽高比例并添加分辨率参数来强制垂直显示：

把iframe的width和height改成9:16的竖屏比例（比如315×560）
在src链接末尾追加?&vq=hd1080，指定竖屏分辨率
确保src里的路径是对应Shorts的嵌入链接（包含/embed/+Shorts视频ID）

示例修改前后：
原代码：

<iframe width="560" height="315" src="https://www.youtube.com/embed/ABC123" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

修改后：

<iframe width="315" height="560" src="https://www.youtube.com/embed/ABC123?&vq=hd1080" title="YouTube Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

方法2：用CSS强制竖屏容器

如果修改代码后前端还是横向显示，给iframe套一个容器，用CSS固定9:16的比例：

在WordPress文本块里添加带容器的代码：

<div class="shorts-embed">
  <iframe src="https://www.youtube.com/embed/ABC123" title="YouTube Shorts" frameborder="0" allowfullscreen></iframe>
</div>

进入WordPress后台「外观」→「自定义」→「额外CSS」，添加以下样式：

.shorts-embed {
  position: relative;
  width: 100%;
  max-width: 400px; /* 可根据网站布局调整最大宽度 */
  aspect-ratio: 9/16;
}
.shorts-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这个方法会让容器强制保持竖屏比例，视频会自适应填充容器，不会被拉伸成横向。