Question

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

我做了一个响应式Iframe，但没有全高！

这是我的代码

Properties properties = new Properties();
properties.load(getClass().getClassLoader().getResourceAsStream("env/config.properties"))

CSS：

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

DEMO + CODE JS FIDDLE

Answer 1

使用viewport percentage lengths，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>

Answer 2

Demo

HTML

<div class="video-container">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/16x9" />
        <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html, body {
    height:100%;
margin:0;
}

.h_iframe {
    position:relative;
}
.h_iframe .ratio {
    display:block;
    width:100%;
    height:auto;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

如何使iframe响应全高度和全宽

2 个答案: