Question

我需要在一个元素中嵌入一个iframe（在某个位置），当我调整窗口大小时，我希望iframe能够响应，这意味着在调整大小时我需要保持宽高比。我通过javascript添加iframe。

我目前的解决方案还不够，因为出于稳定性原因，我将此结构放入的容器不应该有很多嵌套的div。

HTML：

<div class="large-container">
  <div style="width:500px;max-width:100%; background-color:blue;">
    <div class="aspect-ratio">
      <iframe width="500" height="285" src="https://www.youtube.com/embed/YFSSaLB-4SA" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

风格：

body {
  margin: 0;
}

.large-container {
  height: 600px;
  width: 800px;
  max-width: 100%;
  background: red;
}

iframe {
  width: 100%;
}

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 57%;
}

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

https://jsfiddle.net/bo88ou0m/

底部填充是我从代码中获得的，找到宽高比。

是否有人对此相关的文章有任何更新的链接。我遇到的一些javascript解决方案都是在每次DOM更改时都重新呈现（调用全局函数）的解决方案，添加了一个iframe。由于缩放原因，这不是最佳的。

响应式嵌入式iframe保持宽高比（宽高比可变）

0 个答案: