CSS布局求助：如何将iframe视频设置在页面顶部？

要将视频容器固定在页面顶部，你可以通过以下几种CSS实现方式：

方案1：固定定位（始终停留在视口顶部） #

给.video容器添加固定定位样式，同时处理视频的自适应和页面内容的偏移：

/* 固定视频容器在页面顶部 */
.video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000; /* 视频加载前显示黑色背景，可选 */
  z-index: 999; /* 确保视频在其他页面元素上方 */
}

/* 让iframe自适应容器宽度，保持16:9比例 */
.video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

/* 给页面主体添加顶部内边距，避免内容被视频遮挡 */
body {
  padding-top: 56.25vh; /* 16:9比例的高度占比，9/16=56.25% */
}

方案2：粘滞定位（滚动到顶部后固定） #

如果希望视频在页面滚动到顶部后才固定，使用粘滞定位更合适：

.video {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #000;
}

.video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

这种方式不需要给body加内边距，因为容器仍在文档流中，仅当滚动到视口顶部时固定。

注意事项 #

• 检查页面中是否有其他元素设置了较高的z-index，可能会覆盖视频容器
• 如果使用粘滞定位，确保父元素没有设置overflow: hidden，否则粘滞效果会失效
• 可以根据需求调整width、aspect-ratio等属性，适配不同的布局需求

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