Comment positionner les iframes?

Question

Je veux positionner 2 iframes en ligne avec une largeur et une hauteur spécifiques, mais ils obtiennent une très petite hauteur quand je les mets dans un conteneur, quand je supprime le conteneur, ils prennent la largeur et la hauteur que j'ai spécifiées.

Je possède ce code:

-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; 
} 

je mets le récipient parce que je veux qu'ils soient centrés.

Voici un jsFiddle: http://jsfiddle.net/2jar2bvs/

Answer 1

Voici la réponse:

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

Vous devez ajouter une enveloppe à chaque iframe et height:0;padding-bottom:56.25%; qui est égal à un rapport de 16/9. L'iframe est réglé pour positionner la largeur et la hauteur absolues à 100% afin de conserver le ratio 16/9. de son emballage.