WordPress全屏视频拉伸变形问题求助

嘿，我来帮你搞定这个全屏视频拉伸的麻烦！你遇到的问题大概率是缺少了保持视频比例的核心CSS属性，再加上原来的选择器优先级可能不够，导致样式没生效。咱们一步步来修复：

先分析原有代码的问题 #

你之前写的CSS只设置了定位和最小宽高，但没处理视频的比例适配；而且如果父容器没有设置position: relative，绝对定位的视频会脱离正常文档流，布局直接乱掉，自然达不到预期效果。

解决方案代码 #

试试这段更完整的CSS，核心是用object-fit: cover让视频保持比例覆盖容器，同时确保父容器的定位正确：

/* 先给视频的父容器设置基础布局 */
.et_pb_section_video_bg {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 裁剪超出容器的视频部分 */
}

/* 针对视频元素的样式，确保优先级足够 */
.et_pb_section_video_bg .mejs-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键属性！保持视频原比例，铺满容器不拉伸 */
}

额外调试技巧 #

如果还是没生效，打开浏览器的开发者工具（按F12），选中视频元素查看「应用样式」面板：

• 如果你的CSS规则被划掉了，说明优先级不够，可以给选择器加上body前缀（比如body .et_pb_section_video_bg .mejs-video）来提高特异性
• 确认视频元素的父容器确实应用了上面的position: relative等样式

这样调整后，视频应该就能保持原有比例，全屏铺满且不会拉伸变形了！

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