Overflow hidden not working for embedded youtube videos (within facebook like box) on the ipad

I have included the Facebook like box code on my website. However for some reason when viewed on an iPad the embedded Youtube links show outside the iframe (the other content does not). I have tried wrapping this with a div and applying overflow: hidden but still no joy.

It works fine on all browsers on the PC (including Safari) and as such I cannot figure out where to go with this one开发者_高级运维.

Usually with embedded videos I include wmode="transparent" in the embed code which usually sorts it. However because Facebook generates the code so I cannot access the content generated in the widget.

Any help would be much appreciated, as I have been banging my head against the wall about this for days.

Cheers

HTML

<div id="fb-root">
    <iframe id="facebookscroller" 
            src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMorgan-Motor-Company%2F209507192406727&amp;width=450&amp;colorscheme=dark&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=false&amp;height=395"
            scrolling="no"
            frameborder="0"
            style="border:none; overflow:hidden; width:450px; height:395px;"  
            allowTransparency="false"
            wmode="transparent">
    </iframe>
</div>

CSS:

#fb-root {
    position: absolute; 
    top: 50px; 
    right: 10px; 
    z-index: 4;
    height: 395px;
    overflow: hidden;
    display: block;
}