95869


YouTubeの動画をYoutube iFrame Player APIを使用して埋め込みました。  
コントローラを非表示にしているため、YouTubeロゴやチャンネル登録ボタン、後で見るボタン、共有ボタンが動画再生後、一定時間表示されてしまいます。  
仕様上、避けられないため、動画の上と下に余白を設け、ボタン類で動画が見づらくなる事態を避けたいと思います。

現状は、ウィンドウサイズが一定以下になると動画の上と下に余白ができる形になっています。  
理想としては、幅はウィンドウサイズの90%（MAXは640px）、高さは幅16に対して9、それにボタン類の高さ100pxを足したいと考えています。  
例えば、幅が640pxであれば、高さは360px+120pxとなり、その中央に動画が表示されているような状態を想定しています。

現状のソースコードは下記の通りです。  
どのように修正すればよいか、ご教示いただきたいです。よろしくお願いします。

[code]

    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(); // 動画再生を停止
                    }
                });
            })();
        }
    }
    
[/code]

[code]

    .frame{
        margin:             0.25rem auto;
        width:              90%;
        max-width:          640px;
    }
    .frame iframe{
        border-radius:      8px;
        max-width:          100%;
    }
    
[/code]

[code]

    <div class="media">
        <div class="frame">
            <div class="youtube" video-id="YouTube_ID"></div>
        </div>
    </div>
    
[/code]


CC BY-SA 4.0
2023-08-05T10:19:21.950
95859
2023-08-07T07:25:17.917
2023-08-07T07:25:17.917
40585
40585
question
javascript css youtube
YouTubeの動画を埋め込んだ際、アイコン等で動画が隠れないようにしたい


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

[code]

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


CC BY-SA 4.0
2023-08-07T01:13:26.947
95869
2023-08-07T01:13:26.947
40585
95859
answer