Отзывчивое встроенное фоновое видео в полноэкранном режиме

Question

Я использую Bootstrap, и мне было интересно, можете ли вы встроить видео в качестве фона, но заполнить весь экран, точно так же, как вы сделали бы с изображением, центрируя его при изменении размера, но всегда в полноэкранном режиме.

Я выражаю себя очень плохо, поэтому я подготовил это, чтобы вы увидели, что я хочу получить.

Сейчас я пытаюсь сделать то же самое со встроенным видео, но я не знаю, как это сделать.

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%;
}

ОБНОВИТЬ

Я хотел бы получить что-то вроде этого. Когда вы изменяете размер окна, видео адаптируется так, чтобы заполнять экран, независимо от того, горизонтально ли оно, отображается только часть видео. Это было сделано с тегом 'video', я использую тег 'iframe'.

Answer 1

Мне удалось сделать это благодаря трубчатым.

Вам просто нужно добавить в ваше тело тег div с идентификатором "обертка" и вызвать их функцию в js:

HTML

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

JS

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

Answer 2

Проверить этот путь.

HTML

<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="100%" height="100%" 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

html, body{ height: 100%; margin: 0; padding: 0;}
#background {
    position: absolute;
    top:0;
    left:0;
    z-index: -999;
    width: 100%;
    height: 100%;
}
.container-fluid{margin: 0; padding: 0; height: 100%;}
.embed-responsive{height: 100%;}