如何为头部下方视频背景通过嵌入链接设置高度（含示例）

核心原理解析 #

你当前的代码用的是padding-bottom百分比法实现响应式视频，56.25%对应标准16:9的视频比例（9÷16=0.5625）。要改成类似目标网站的头部下方视频背景高度，本质是调整这个比例值，或结合视口单位控制高度范围。

具体调整方案 #

1. 自定义固定比例（非16:9）

如果想让视频背景高度更矮或更高，直接修改外层div的padding-bottom值即可：

• 21:9宽屏比例：padding-bottom: 42.857%（9÷21≈0.42857）
• 4:3比例：padding-bottom: 75%（3÷4=0.75）
• 自定义高度比例：比如希望高度占宽度的40%，设padding-bottom: 40%

修改后的代码示例：

<div style="width:100%;height:0px;position:relative;padding-bottom:40%;">
  <iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe>
</div>

2. 结合视口单位限制最大高度

如果想让视频在大屏上不太高，小屏保持合适比例，可在外层加容器并设置max-height：

<div style="width:100%;max-height:60vh;overflow:hidden;">
  <div style="width:100%;height:0px;position:relative;padding-bottom:56.25%;">
    <iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe>
  </div>
</div>

max-height:60vh表示视频最大高度占视口高度的60%，超过后视频会裁切，保持宽度铺满，贴合目标网站效果。

3. 固定高度适配头部下方布局

如果需要视频高度固定（比如配合头部高度），直接设置外层div高度，同时让iframe自适应：

<div style="width:100%;height:400px;position:relative;">
  <iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;object-fit:cover;"></iframe>
</div>

添加object-fit:cover可让视频在固定高度内铺满容器，避免拉伸变形，仅裁切超出部分。

关键注意点 #

• 保留position:relative的外层容器和position:absolute的iframe组合，确保iframe填满容器
• 用object-fit:cover避免视频在非原比例容器内变形
• 响应式场景优先用百分比或视口单位，避免固定像素值导致小屏显示异常

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