如何使 iframe 响应全高和全宽

Question

我正在嵌入一个 youtube/dailymotion 视频，我想让 iframe 具有响应性，尤其是全高，与窗口的高度相同：

我做了一个响应式 Iframe 但不是全高！

这是我的代码

   <div  class="video-container">
                       <iframe height="100%" width="100%"  src="https://www.youtube.com/embed/7ipiybRLqZc" frameborder="0" allowfullscreen></iframe> 
                </div>

CSS :

.video-container {
    position: relative;
    padding-bottom: 100%;
    height:100%;

}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin:0px;
}

演示 + 代码 JS 小提琴

Answer 1

使用视口百分比长度，vw并且vh设置的高度和宽度iframe。或者，使用calc来减去，4px因为玩家似乎添加了它。

视口百分比长度定义了相对于视口大小的长度，即文档的可见部分。只有基于 Gecko 的浏览器会在修改视口大小时动态更新视口值（通过修改台式计算机上的窗口大小或通过手机或平板电脑上的设备）。

body {
  margin: 0;
}
iframe {
  height:calc(100vh - 4px);
  width:calc(100vw - 4px);
  box-sizing: border-box;
}

<iframe src="https://www.youtube.com/embed/7ipiybRLqZc" frameborder="0" allowfullscreen></iframe>