Content not showing past iframe

i have a website and i want to embed a Youtube player as a background (full width and height) and i want to add a white bar with icons to act as buttons to activate the slider above the youtube player.

Here is a picture that may help me explain it. Design

But when i add code past my iframe tag it wont show up on my website and it doesn´t even show up at the source code at chrome.

HTML:

  <div class="video-container">
    <iframe class="ytplayer" width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE?loop=1&autoplay=1&modestbranding=1&autohide=1&showinfo=0&iv_load_policy=3&controls=0&playlist=z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe>
  </div>

CSS:

.video-container, #content{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
}
.video-container {
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
}
.ytplayer {
pointer-events: none;
position: absolute;
}