php - 使用 API 动态拉伸(stretch)以适合 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-video video 更改为#wrapper-video2 并重命名它所在的 DIV，它是否会出现意外情况？

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>