内容未显示过去的iframe

Question

我有一个网站，我想嵌入一个Youtube播放器作为背景（全宽和高度），我想添加一个带有图标的白色条，作为按钮激活youtube播放器上方的滑块。

这张照片可以帮我解释一下。 Design

但是，当我将代码添加到我的iframe代码后，它不会显示在我的网站上，甚至不会显示在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;
}