使用API适合YouTube视频的动态伸展

Question

我想重新创建以下内容：demo

html

<header role="banner">
 <div id="wrapper-video">
<video poster="" autoplay loop>
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/cut.mp4"           
    type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
</video>
</div>
</header>

CSS

section[role="banner"] {
 position: relative;
 width: 100%;
 }
#wrapper-video {
 position: fixed;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 z-index: -100;
 }
#wrapper-video video {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 min-width: 50%;
 min-height: 50%;
 }

...但是，通过通过YouTube的API加载的YouTube视频替换视频，该视频将播放器加载到这样的div中：

<div id="player"></div>

，但是一旦我开始更改html，即使我将上述图像更改为(作为概念证明(，居中也关闭了中心。我在这里做错了什么？

如果我只将其更改为＃wrapper-video2并将其重命名为？

Answer 1

#player将被iframe替换。在这里，您将如何使用YouTube API使用该响应代码。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE'
  });
}

section[role="banner"] {
  position: relative;
  width: 100%;
}
#wrapper-video {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -100;
}
#wrapper-video video,
#wrapper-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

<header role="banner">
  <div id="wrapper-video">
    <div id="player"></div>
  </div>
</header>