ダイナミックストレッチは、私は、この再作成したい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を＃wrapper-video2に変更してDIVの名前を変更した場合、＃wrapper-video 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>