Having issue with making your YouTube Videos responsive.

I found some answers on google to the issue 'make Youtube embed responsive' but none of the replies fitted my website.  The issue here was that in some way the height was being forced shorted; meaning the display ratio was wrong.  To fix I've used a couple of div heights, that are Mobile dependent.  

In the youtube iframe I have both the height and width set to 100%.   And then applied an 'auto' width in the CSS.  its a css trick that seems to work.   ( all except ie 8 )


Next you need to wrap the embed code in a DIV .  like

div class="videoContainer"

and here is the CSS 

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0, overflow: hidden;
}   

.video-container ifram, .video-container object,  . video-

container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}