如果是的话如何定位？

Question

我想用特定的宽度和高度来定位2 iframes，但是当我把它们放在容器中时，它们得到的高度非常小，当我删除容器时，它们会得到我指定的宽度和高度。

我有这样的代码：

-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的比率。他的包装纸。