Embed YouTube video is not responsive

Hello all!

I am trying to make my embed YouTube video responsive in my website. I am using Fluid Grid Layout html 5.

The css code I used:

.video-container {
position: relative;

padding-bottom: 56.25%; padding-top: 30px; height: 0;

overflow: hidden;

}

.video-container iframe,

.video-container object,
.video-container embed {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

Html code:

<div class="gridContainer clearfix">

<div class="video-container"><iframe src="http://www.youtube.com/embed/23T2VMtzVrE?rel=0" frameborder="0" allowfullscreen></iframe></div>

The video will only show if I make the class into an id

Example:

<div class="gridContainer clearfix">
<div id="video-container"><iframe src="http://www.youtube.com/embed/23T2VMtzVrE?rel=0" frameborder="0" allowfullscreen></iframe></div>

And if I add the width and the height the video will still not be responsive

Example:

<div class="gridContainer clearfix">
<div id="video-container"><iframe width="640" height="480" src="http://www.youtube.com/embed/23T2VMtzVrE?rel=0" frameborder="0" allowfullscreen></iframe>

</div>

Can someone please help? Thank you.