Bootstrap主题嵌入IFrame变形：视频拉伸问题求助

嘿，我来帮你拆解下遇到的这两个关联问题～

1. 视频拉伸的核心原因 #

视频出现拉伸变形，90%以上都是因为没有正确约束宽高比。你提到默认CSS影响了比例，大概率是这些规则给视频（或者它的父容器）设置了固定的width和height，但没加比例限制。举个典型的错误写法：

/* 这种强制固定宽高的写法会直接拉伸视频 */
video {
  width: 100%;
  height: 400px;
}

视频本身有自己的原始比例（比如16:9、4:3），如果强制给它套一个和原始比例不匹配的尺寸框，浏览器就会把视频拉伸填满这个框，自然就变形了。

2. 移除CSS后视频消失的原因 #

这说明你删掉的那部分CSS，除了控制尺寸，还包含了让视频「正常显示」的必要属性。常见的情况有这几种：

• 视频默认是inline元素，如果没给它设置宽高，可能会缩成一个极小的点，看起来像消失了；
• 默认CSS里可能设置了display: block、visibility: visible这类控制显示的属性，移除后视频回到了隐藏/不占空间的状态；
• 父容器的尺寸完全依赖这段CSS，移除后父容器直接塌缩，视频也跟着没了展示空间。

快速修复方案 #

给你两个实用的解决办法，既能保证比例不变，又能让视频正常显示：

• 方案一：用aspect-ratio（现代浏览器友好）
  直接给视频设置和它原始比例一致的aspect-ratio，配合宽高自适应就能锁死比例：

  video {
    width: 100%;
    /* 替换成你的视频实际比例，比如16:9就写16/9 */
    aspect-ratio: 16/9;
    object-fit: contain; /* 可选：不想裁剪画面就用contain，需要填满容器就用cover */
  }
  

• 方案二：padding比例法（兼容旧浏览器）
  给视频套一个父容器，利用padding的百分比特性模拟比例：

  <div class="video-wrap">
    <video src="你的视频地址" controls></video>
  </div>
  

  .video-wrap {
    position: relative;
    width: 100%;
    /* 16:9比例的计算方式：9÷16×100% = 56.25% */
    padding-top: 56.25%;
  }
  .video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

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