How to make a YouTube embedded video a full page width one?

Question

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?

This guy wrote a good tutorial for responsive youtube vids http://avexdesigns.com/responsive-youtube-embed/ — koningdavid, Nov 24 '13 at 23:22

score 27 · Accepted Answer · answered Nov 24 '13 at 23:31

27

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' });
  });
});

answered Nov 24 '13 at 23:31

Milan and Friends

5,560
1
20
28

To remove the scrollbar just use `body { overflow: hidden; }` or `body { overflow-x: hidden; }` to keep vertical scrolling if you have more elements on the page. I've updated the Fiddle. – Milan and Friends Nov 24 '13 at 23:40
1

How to make this ONLY adapt to the width and not the height, but still keep the ratio? – Erika Jun 02 '15 at 11:18

score 1 · Answer 2 · answered Jan 12 '20 at 01:04

1

Correct style for your iframe

iframe {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

answered Jan 12 '20 at 01:04

s k

4,342
3
42
61

score 0 · Answer 3 · answered Nov 24 '13 at 23:34

0

Try using innerHeight or .clientHeight:

var doc = document, bod = doc.body, dE = doc.documentElement;
var wh = innerHeight || dE.clientHeight || bod.clientHeight;

var wh now contains window height, without scrollbar.

answered Nov 24 '13 at 23:34

StackSlave

10,613
2
18
35

How to make a YouTube embedded video a full page width one?

3 Answers3

Linked