需要响应式iframe布局

Question

我希望设计一个包含4 iframes的页面，并为其设置响应式布局。下面是在桌面上工作的代码，但在ipad上这不能正常工作。 我想要它的响应式布局。

Demo

Answer 1

对于响应式布局，请使用CSS媒体查询

<强> DEMO

<强> HTML

<div class="wrapper">
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

<强> CSS

html, body {
    height:100%;
}
.wrapper {
    padding: 0 1%;
    width:98%;
}
.h_iframe {
    float:left;
    margin:1% 2%;
    width:46%;
}
iframe {
    width:100%;
}
@media screen and (max-width: 768px) {
    .wrapper {
        margin:0 auto;
        padding:0;
        width:95%;
    }
    .h_iframe {
        margin:0;
        width:100%;
    }
}

Answer 2

的 Demo

以下是页面上完整的响应式4 iframe。

HTML

<div class="wrapper">
    <div class="h_iframe1">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="wrapper">
    <div class="h_iframe2">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="wrapper">
    <div class="h_iframe3">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="wrapper">
    <div class="h_iframe4">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html, body {
    height:100%;
}
.h_iframe1 iframe {
    position:absolute;
    top:0;
    width:100%;
    height:25%;
}
.h_iframe2 iframe {
    position:absolute;
    top: 25%;
    width:100%;
    height:25%;
}
.h_iframe3 iframe {
    position:absolute;
    bottom:25%;
    width:100%;
    height:25%;
}
.h_iframe4 iframe {
    position:absolute;
    bottom:0;
    width:100%;
    height:25%;
}

Answer 3

根据Youtube iframe http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

解释解决方案