1

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>
1
  • 1
    YouTube API サービスのデベロッパーポリシーによると、III. F. 1. YouTube のデザインの項目で、YouTube から事前に承認を得ていない限りユーザーインターフェースを変更してはならないとしています。おそらく理想として挙げられている状態では埋め込み動画の上に表示されるボタン類の位置を DOM を操作して動かそうとしているのだと思いますが、この項目との兼ね合いが問題になるかもしれません。
    – nekketsuuu
    Commented 2023年8月6日 13:38

1 件の回答 1

2

自己解決しましたのでご報告を。
JavaScriptを以下のように修正すれば、考えていたことが実現できました。

var options = {
    videoId: videoId,
    width: 640,
    height: 480,
    playerVars: {
        controls: 0,        // コントローラー非表示
        modestbranding: 1,  // YouTubeロゴ非表示
        rel: 0,             // 関連動画非表示
        disablekb: 1,       // キーボード操作不能
    }
};

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。