Как разместить iframes?

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/

Вам нужно добавить обертку для каждого фрейма и height:0;padding-bottom:56.25%;, равное отношение 16/9. В iframe устанавливается абсолютная ширина и высота 100%, поэтому он будет поддерживать соотношение 16/9. его обертки.