YouTube video as responsive "box" div background

Question

Like described in the image attached, I need to set a YouTube video in a div "box" (the black one, to be clear), under some text (the "headline").
It still needs to count the views, of course, just like a normal YouTube embedded video.

Here's the actual code (run it full page).
I need to put the video in the #page00 box.

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

html {
  margin: auto;
  height: 100%;
  width: 100%;
}

body {
  background: #fff;
  color: #222;
  font-family: Georgia, sans-serif;
  font-weight: 400;
  text-align: center;
  margin: auto;
  height: 100%;
  width: 60%;
  max-width: 1024px;
}

.container {
  display: table;
  margin: auto;
  margin-bottom: 20px;
  height: auto;
  width: 100%;
  background-position: center;
  background-size: cover;
}

.content {
  display: table-cell;
  margin: auto;
  vertical-align: middle;
}

.cover {
  background-color: #362f2d;
  color: #fff;
  height: 60%;
}

.snippet {
  background-color: #362f2d;
  color: #fff;
  height: 30%;
}

.hover .content {
  background-color: rgba(54, 47, 45, 0.25);
}

#page00 h1 {
  font-size: 70px;
  line-height: 125%;
}

#page00 h2 {
  font-weight: 400;
  line-height: 125%;
}

h1,
h2 {
  font-family: "Montserrat";
  text-transform: uppercase;
}

h1 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 100%;
}

h2 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 250%;
}

p {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 150%;
  margin: auto;
  margin-bottom: 2%;
  width: 90%;
}

b {
  font-weight: 700;
}

a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

.text {
  text-align: left;
}

img {
  width: 100%;
}

#menu .name {
  font-weight: 700;
}

#menu a {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 400;
  margin: 1%;
  padding-bottom: 1%;
  padding-top: 5%;
}

#menu a:hover {
  color: inherit;
}

#menu a {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

<div id="menu" class="container">
  <div class="content">
    <a href="#" class="name">Matteo Rizzo</a>
    <a href="#">menu 01</a>
    <a href="#">menu 02</a>
    <a href="#">menu 03</a>
  </div>
</div>

<!--- I need to put the video under this div v v v ---->

<div id="page00" class="container cover hover">
  <div class="content">
    <h1>Headline</h1>
    <h2>subtitle</h2>
  </div>
</div>

<div id="page01" class="container">
  <div class="content">

    <h2>Subtitle</h2>
    <p class="text">Lorem ipsum etcetera.</p>
  </div>
</div>

The actual website is http://matteorizzo.me.
I need to replace the image with the video.

Answer 1

Weave: http://kodeweave.sourceforge.net/editor/#d230b9b3ddf5437ec3e9d7da128b5a18

Weave: (directed towards your sample)
http://kodeweave.sourceforge.net/editor/#8a72ed398f9d60ddd40576052ffeb4ac

Here is a Pure JS solution. It doesn't use a YouTube, but shows the concept. (By Dudley Storey)

To show a YouTube video I recommend the plugin BigVideo.js or tubular (which requires JQuery). Unfortunately as of 12/30/2015, the BigVideo.js project is no longer under active development.

There is also this pen by Krz Szzz which uses JQuery and the YouTube API (another source) to display a video as a div background.

In addition there is, "Use any YouTube Video as your Page Background". (The only downside with this method is that the video is not muted)

To embed a YouTube video as muted take a look at, How do I automatically play a Youtube video (IFrame API) muted?.

Below is a quick mockup using the code you provided to display a YouTube video as the header background. As you asked.

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: $('.resetframe').height(),
    width: $('.resetframe').width(),
    playerVars: {
      autoplay: 1,
      loop: 1,
      controls: 0,
      showinfo: 0,
      autohide: 1,
      modestbranding: 1,
      vq: 'hd1080'},
    videoId: '_Gd8mbQ3-mI',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(e) {
  e.target.playVideo();
  player.mute();
}

var done = false;
function stopVideo() {
  player.stopVideo();
}

$(window).on('load resize', function() {
  $('#player').css({
    'width' : $('.resetframe').width(),
    'height': $('.resetframe').height()
  })
  $('.heading').css('marginTop', - $('.resetframe').height())
})

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/* Globals */
html, body {
  height: 100%;
}
h1, h2 {
  font-family: "Montserrat";
  text-transform: uppercase;
}

h1 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 100%;
}

h2 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 250%;
}

p {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 150%;
  margin: auto;
  margin-bottom: 2%;
  width: 90%;
}

a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

img {
  width: 100%;
}

body {
  color: #222;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  text-align: center;
  margin: auto;
  width: 60%;
  max-width: 1024px;
}

/* Navigation */
.nav a {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 400;
  margin: 1%;
  padding-bottom: 1%;
  padding-top: 5%;
}
.nav a:hover {
  color: inherit;
}

.nav .name {
  font-weight: 700;
}

/* Classes */
.table {
  display: table;
  margin-bottom: 20px;
  width: 100%;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}
.table p {
  text-align: left;
}

#page00 h1 {
  font-size: 70px;
  line-height: 125%;
}
#page00 h2 {
  font-weight: 400;
  line-height: 125%;
}

/* Specifics */
.resetframe {
  width: 100%;
}
.cover {
  position: relative;
  color: #fff;
  background: #000;
}
.heading {
  position: relative;
  display: block;
  background: #000;
  background: rgba(0, 0, 0, 0.25);
  padding-top: 1px;
}

/* variable classes */
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav table">
  <div class="cell">
    <a href="#" class="name">Matteo Rizzo</a>
    <a href="#page00">Page 1</a>
    <a href="#page01">Penu 2</a>
    <a href="#">Penu 3</a>
  </div>
</div>

<!--- I need to put the video under this div ---->

<div id="page00" class="cover table">
  <img class="resetframe hide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAACMCAYAAAANzXDRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3gkdERMPpzeviAAAAMVJREFUeNrtwYEAAAAAw6D5U9/gBFUBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADPALyqAAGMiCoVAAAAAElFTkSuQmCC">

  <div id="player"></div>
  <div class="cell heading">
    <h1>Headline</h1>
    <h2>subtitle</h2>
  </div>
</div>

<div id="page01" class="table">
  <div class="cell">

    <h2>Subtitle</h2>
    <p>Lorem ipsum etcetera.</p>
  </div>
</div>