YouTubeの動画をYoutube iFrame Player APIを使用して埋め込みました。
コントローラを非表示にしているため、YouTubeロゴやチャンネル登録ボタン、後で見るボタン、共有ボタンが動画再生後、一定時間表示されてしまいます。
仕様上、避けられないため、動画の上と下に余白を設け、ボタン類で動画が見づらくなる事態を避けたいと思います。
現状は、ウィンドウサイズが一定以下になると動画の上と下に余白ができる形になっています。
理想としては、幅はウィンドウサイズの90%(MAXは640px)、高さは幅16に対して9、それにボタン類の高さ100pxを足したいと考えています。
例えば、幅が640pxであれば、高さは360px+120pxとなり、その中央に動画が表示されているような状態を想定しています。
現状のソースコードは下記の通りです。
どのように修正すればよいか、ご教示いただきたいです。よろしくお願いします。
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady(){
var containers = document.querySelectorAll('.youtube');
for(var i = 0; i < containers.length; i++){
(function(){
var container = containers[i];
var videoId = container.getAttribute('video-id');
var options = {
videoId: videoId,
playerVars: {
controls: 0, // コントローラー非表示
modestbranding: 1, // YouTubeロゴ非表示
rel: 0, // 関連動画非表示
disablekb: 1, // キーボード操作不能
}
};
var player = new YT.Player(container, options);
player.addEventListener('onStateChange', function(event){
// 動画再生終了イベント
if(event.data === YT.PlayerState.ENDED){
player.seekTo(0); // 巻き戻し
player.stopVideo(); // 動画再生を停止
}
});
})();
}
}
.frame{
margin: 0.25rem auto;
width: 90%;
max-width: 640px;
}
.frame iframe{
border-radius: 8px;
max-width: 100%;
}
<div class="media">
<div class="frame">
<div class="youtube" video-id="YouTube_ID"></div>
</div>
</div>