How to make a div/video to always be size of browser window, and stuck to certain position

Question

I would like to know how to make a video or div stuck to a certain position while it will always be the size of the browser window. Here's what I want.

Their "background" contains a video, and if you drag the size of the browser window, you'll notice that it always resizes the video. This is what I'm trying to make.

Here is my code:

#menuContainer{
width:650px;
height:50px;
position:relative;

z-index:3;

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

background-color:rgb(183, 52, 178);
}


#menuLogo2{
height:50px;
width:126px;
}


#menuDevide1{


width:1px;
height:45px;

background-color:black;

position:relative;
top:-47.5px;
left:131px;

margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}


#menuDevide2{
width:1px;
height:45px;

background-color:black;

position:relative;
top:-119.5px;
left:260px;

margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}


#menuDevide3{
width:1px;
height:45px;

background-color:black;

position:relative;
top:-191.5px;
left:391px;

margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}


#menuDevide4{
width:1px;
height:45px;

background-color:black;

position:relative;
top:-263.5px;
left:520px;

margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}


#menuBottomline{
width:100%;
height:1px;

background-color:black;

position:absolute;
top:70px;
left:0px

}

#headerBG{
position:absolute;
top:0px;
left:0px;

z-index:2;

background-color:#ffffff;
height:70px;
width:100%;
}


.menuClick{
color:#000000;

text-decoration:none;

font-family: "Open Sans", Arial, sans-serif;
font-size:20px;;
}


.menuClick:hover{
color:#999999;
}


#menuPortfolio1{
position:relative;
top:-83px;
left:133px;

width:126;

text-align:center;
}


#menuServices1{
position:relative;
top:-155px;
left:263px;

width:126;

text-align:center;
}


#menuProcess1{
position:relative;
top:-227px;
left:393px;

width:126;

text-align:center;
}


#menuContact1{
position:relative;
top:-299px;
left:522px;

width:126;

text-align:center;
}


#mainOverlapWrap{
z-index:1;
position:relative;
width:100%;
height:100%;
}


#video1{   
position:absolute;
top:71px;
left:0px;

min-width:1%;
width:100%;
height:100%;
}


#mainOverlay{
position:absolute;
top:0px;
left: 0px;

heightx:100%;
height:100%;

background-color: rgba(0,0,0,0.3);
}

Alternatively, you could check out this JSfiddle.

Please note, I am using their video as a placeholder. My intent is not to steal their work.

PROBLEM AFTER THE MAIN ISSUE HAS BEEN RESOLVED

When I resize my browser, I see this really small little grey edge on the right side. It tends to appear when I'm resizing to the left, but goes away when resizing to the right. This picture shows what I mean. JSfiddle can be found here. I hope you'll be able to fix this problem!

Perhaps it's best to copy the codes in JSfiddle and put them in files on your computer. The whole thing looks kinda weird in JSfiddle, but not in browsers.

Answer 1

HTML

<div class="wrapper">
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body        {height:100%;  margin:0;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

DEMO

DEMO 2

So here we go for tag

HTML

<div class="wrapper">
  <video class="videoInsert">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
 </video>
</div>

CSS

.videoInsert {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

Final DEMO

So now we need jquery for it.

HTML

<div id="video-viewport">
    <video autoplay preload width="640" height="360">
        <source src="https://s3.amazonaws.com/whiteboard.is/videos/bg-loop-new.mp4" />
    </video>
</div>

CSS

#video-viewport {
    position: absolute;
    top: 0;
    left:0;
    overflow: hidden;
    z-index: -1; /* for accessing the video by click */
}
body{
    margin:0;
}

js

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function() { // runs after DOM has loaded

    vid_w_orig = parseInt(jQuery('video').attr('width'));
    vid_h_orig = parseInt(jQuery('video').attr('height'));
    $('#debug').append("<p>DOM loaded</p>");

    jQuery(window).resize(function () { resizeToCover(); });
    jQuery(window).trigger('resize');
});

function resizeToCover() {

    // set the video viewport to the window size
    jQuery('#video-viewport').width(jQuery(window).width());
    jQuery('#video-viewport').height(jQuery(window).height());

    // use largest scale factor of horizontal/vertical
    var scale_h = jQuery(window).width() / vid_w_orig;
    var scale_v = jQuery(window).height() / vid_h_orig;
    var scale = scale_h > scale_v ? scale_h : scale_v;

    // don't allow scaled width < minimum video width
    if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

    // now scale the video
    jQuery('video').width(scale * vid_w_orig);
    jQuery('video').height(scale * vid_h_orig);
    // and center it by scrolling the video viewport
    jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
    jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);
};

DEMO HERE