動態延伸使用API​​

Question

適合YouTube影片我想重新創建：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視頻加載視頻通過YouTube的API將播放器加載到DIV中，如下所示：

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

但是，只要我開始更改html，居中關閉，即使我將上述更改爲圖像（作爲概念驗證），居中也會關閉。我在這裏做錯了什麼？

如果我只是將其更改爲＃wrapper-video2並重命名它所在的DIV，那麼是否＃wrapper-video視頻會做一些意想不到的事情？

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>