如何定位 iframe？

Question

我想以特定的宽度和高度内联放置 2 个 iframe，但是当我将它们放入容器中时它们的高度非常小，当我删除容器时它们采用我指定的宽度和高度。

我有这个代码：

-HTML:

<div class="video-container">
            <iframe id="video-1" src="https://www.youtube.com/embed/4wRrDaWCNCA" frameborder="0" allowfullscreen></iframe>
            <iframe id="video-2" src="https://www.youtube.com/embed/hpYpbSxG7Os" frameborder="0" allowfullscreen></iframe>
        </div>
        <p class="video-text">Partner ufficiale : Miss Mondo .</p>

-CSS:

.video-container{
    width:100%;
    position: static;
    margin:25px auto ;  
    text-align:center;
}


#video-1{
    width:40%;
    height:40%;
    display:inline-block;
    box-sizing:border-box;

}

#video-2{
    width:40%;
    height:40%;
    box-sizing:border-box;
    display:inline-block;
}




 .video-text{
     width:50%;
     margin:0 auto;
 }

我放容器是因为我希望它们居中。

这是一个 JSFiddle：http://jsfiddle.net/2jar2bvs/

Answer 1

这里是答案：

http://jsfiddle.net/2jar2bvs/1/

您需要为每个 iframe 添加包装，height:0;padding-bottom:56.25%; 等于 16/9 的比率。 iframe 设置为定位绝对宽度和高度 100%，因此它将保持 16/9 的比例。他的包装纸。

如何定位 iframe？

How to position iframes?

css

iframe

position