动态拉伸以使用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-video视频更改为＃wrapper-video2并将其重命名为DIV，那么＃wrapper-video video是否会出现意外情况？

Answer 1

this.user.getUserbyUserName(this.profile.nickname)) .subscribe( (result) => { if(result == null) { this.checkUserResponse = 'unknow'; } else { //this.checkuser = true ; if(result.logged == true) { this.checkUserResponse = 'logged'; } else this.checkUserResponse = 'ok'; } }, (err) => console.error(err), () => console.log('done') ); 将替换为#player。这里＆＃39;如何在youtube API中使用该响应式代码。

＆＃13;

＆＃13;

iframe

＆＃13;

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'
  });
}

＆＃13;

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%;
}

＆＃13;

＆＃13;

＆＃13;