Responsive Embedded Background Video full screen

Question

I'm using Bootstrap and was wondering if you could embed a video as background but filling the whole screen, just the same you'd do with an image, centering it when resizing but always full screen.

I express myself very badly so I've prepared this so that you see what I want to get.

Now, I'm trying to do the same with an embedded video, but I don't know how to do it.

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container-fluid">
<div class="embed-responsive embed-responsive-16by9">
    <div id="background">
       <iframe id='player' width="2500" height="1406" src="https://www.youtube.com/embed/Rk6_hdRtJOE?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=Rk6_hdRtJOE&amp;enablejsapi=1&version=3" frameborder="0"></iframe>
    </div>
</div>          
</div>

CSS

#background {
    position: absolute;
    top:0;
    left:0;
    z-index: -999;
    width: 100%;
    height: 100%;
}

UPDATE

I'd like to get something like this. When you resize the window, the video is adapted to fill the screen no matter horizontally it only appears part of the video. That's been done with the 'video' tag, I'm using the 'iframe' one.

Answer 1

I managed to do it thanks to tubular.

You just need to add in your body a div tag with the id "wrapper" and call their function in js:

HTML

<div id="wrapper"></div>

JS

$().ready(function() {
  $('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
});