如何消除iframe产生的额外空白？实现16:9自适应与侧边透明

首先咱们拆解下问题：你遇到的空白大概率是iframe默认的边框、内边距，加上没给iframe设置自适应16:9的容器布局导致的；而侧边透明的核心，是让iframe本身无背景，同时让容器只控制比例，透出父页面的背景。

下面直接上可落地的解决方案：

1. 清除iframe的默认样式 #

先给iframe去掉自带的边框、边距，同时设置背景透明，确保侧边能透出父页面的背景：

<iframe id="primaryVideo" 
        src="http://54.202.201.116/app/5/" 
        frameborder="0" 
        style="border: none; padding: 0; margin: 0; background: transparent;">
  <p>Your browser does not support iframes.</p>
</iframe>

这里frameborder="0"和border: none是双重保险去掉边框，background: transparent直接让iframe背景透明，是实现侧边透明的关键。

2. 用容器实现16:9自适应比例 #

单纯给iframe设宽高百分比没法稳定保持16:9比例，我们可以用padding-top技巧创建固定比例的容器，让iframe完全撑满容器：

<body background="images/Background.png">
  <!-- 16:9比例的自适应容器 -->
  <div style="position: relative; width: 100%; padding-top: 56.25%; overflow: hidden;">
    <iframe id="primaryVideo" 
            src="http://54.202.201.116/app/5/" 
            frameborder="0"
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: transparent;">
      <p>Your browser does not support iframes.</p>
    </iframe>
  </div>
</body>

• 为什么是padding-top: 56.25%？因为16:9的比例是9/16=0.5625，容器的高度会始终是宽度的56.25%，完美保持16:9比例；
• 绝对定位的iframe会完全填满容器，不会留任何空白，overflow: hidden还能防止嵌入内容超出容器时出现滚动条（如果你的应用不需要滚动条的话）。

3. 额外优化：处理滚动条导致的空白 #

如果嵌入的Web应用自带滚动条，导致iframe出现额外空白，可以给iframe加上滚动条隐藏设置：

<iframe ... scrolling="no" style="... overflow: hidden;"></iframe>

scrolling="no"结合CSS的overflow: hidden，能在现代浏览器里稳定隐藏滚动条，避免额外空白。

效果验证 #

做完上述设置后，你应该能看到：

• iframe完美自适应任意16:9比例的窗口，拉伸浏览器时比例始终不变；
• iframe周围没有任何空白，完全贴合容器；
• 侧边透出父页面的背景图，实现透明效果。

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