How to position iframes?

I want to position 2 iframes inline with a specific width and height, but they get a very small height when I put them in a container, when I delete the container they take the width and height that I specified.

I have this 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;
 }

I put the container because I want them to be centered.

Here a JSFiddle: http://jsfiddle.net/2jar2bvs/

Solution

Here the answer:

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

You need to add a wrapper to each iframe and height:0;padding-bottom:56.25%; that is equal to a ratio of 16/9. The iframe is set to position absolute width and height 100% so it will keep the 16/9 ratio. of his wrapper.