如何用内联CSS实现带最大宽度的响应式居中嵌入YouTube视频

没问题，我来帮你搞定这个响应式视频的最大宽度限制和居中问题，顺便把代码逻辑拆解得明明白白，让你以后能自己灵活调整！

修改后的完整代码 #

<div style="max-width: 600px; margin: 0 auto; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
          width="560" height="315" 
          src="你的视频URL" 
          frameborder="0" 
          allow="autoplay; encrypted-media" 
          allowfullscreen>
  </iframe>
</div>

代码逻辑拆解（彻底搞懂每一步） #

• 外层容器的核心控制样式：

  • max-width: 600px：直接给视频容器设最大宽度，桌面端不会再无限拉伸，超过600px就固定在这个尺寸。
  • margin: 0 auto：这是块级元素水平居中的经典写法，让视频容器在页面中间显示。
  • position: relative：绝对定位的iframe需要一个参照父元素，这个属性就是告诉iframe“以我为基准定位”，不然iframe会跑到页面最左上角。

• 维持16:9视频比例的关键：

  • padding-bottom: 56.25%：这个百分比是相对于容器宽度计算的（9÷16=56.25%），不管容器宽度怎么变，高度都会自动匹配宽度的56.25%，完美保持YouTube视频的标准16:9比例。
  • height: 0; overflow: hidden：容器的高度已经由padding-bottom撑起来了，把height设为0可以避免额外的空白高度，overflow: hidden防止视频内容溢出容器。

• iframe的自适应设置：

  • position: absolute; top: 0; left: 0; width: 100%; height: 100%：让iframe完全填满外层容器的空间，不管是手机端窄屏还是桌面端的最大600px宽度，iframe都会自适应填充，同时保持比例不变。

另外提一句：你原代码里的padding-top:35px是早年兼容旧版IE的写法，现在主流浏览器都不需要了，所以我给去掉了；如果你的场景必须兼容非常老的浏览器，再加回去也不影响现有功能。

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