如何让YouTube视频缩略图实现响应式适配？

你可以通过以下调整来修复缩略图超出播放器的问题：

方案1：限制容器最大宽度并水平居中 #

修改容器的CSS，替换固定左右margin为自动居中，并添加最大宽度限制，避免宽屏设备上容器过宽导致缩略图无法适配：

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%; /* 维持16:9的标准视频宽高比 */
  position: relative;
  margin: 50px auto 30px; /* 水平居中，上下保留原有间距 */
  max-width: 1200px; /* 根据需求调整最大宽度，比如1000px或1400px */
}

.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

方案2：确保盒模型计算正确 #

如果页面全局没有设置box-sizing: border-box，可能会导致容器的内边距、边框影响尺寸计算，给容器和iframe添加盒模型声明：

.iframe-container,
.iframe-container iframe {
  box-sizing: border-box;
}

原理说明 #

原来的固定左右60px margin在宽屏设备上会让容器宽度无限延伸，而YouTube嵌入视频的缩略图无法无限制拉伸适配比例。通过限制容器最大宽度，既能保证桌面端的观看体验，又能维持视频的16:9黄金比例，让缩略图完美适配播放器容器。

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