Here's the fiddle to the code: http://jsfiddle.net/dLPa8/
If you scroll down, there's a video embedded from YouTube. What I need it, it should cover the full page height and width. I mean it should appear somewhat like the first section (in the fiddle).
I tried this:
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
It solved the problem to a certain extent, but the video clings to the top of the page using the above iframe
. How can I make the video section height the full page height?
Here's a FIDDLE
<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>
$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
// If you want to keep full screen on window resize
$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});
Correct style for your iframe
iframe {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With