如何在Divi主题中正确嵌入并调整iframe尺寸？

核心方案：用响应式容器包裹iframe #

直接设置Divi模块/行的尺寸无效，是因为iframe本身没有响应式适配逻辑。用CSS容器固定16:9比例，让iframe自动填满容器：

• 打开Divi的代码模块，替换原有的iframe代码为以下结构：

  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="https://url.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" allowfullscreen></iframe>
  </div>
  

  其中padding-bottom: 56.25%是16:9比例的计算结果（9÷16=0.5625），能让容器根据宽度自动匹配高度，保持比例不变。

优化Divi模块设置 #

• 进入代码模块的高级选项卡，将模块间距的上下左右内边距（Padding）全部设为0，避免模块自带的空白缩小显示区域。
• 检查iframe所在的行（Row）设置：将内容宽度设为100%，如果需要限制最大显示宽度，可以在容器div的样式里添加max-width: 1200px; margin: 0 auto;，调整为你需要的宽度值。

确保键盘控制功能正常 #

因为演示需要键盘操作，给iframe添加权限属性，保证能捕获键盘事件：
修改iframe标签，添加allow="keyboard"属性，最终代码如下：

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://url.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" allowfullscreen allow="keyboard"></iframe>
</div>

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