タイトル通りですが、YouTubeを埋め込んで幅一杯にして自動再生する方法のメモ

YouTubeを埋め込む2つの方法

埋め込む方法としては２つありまして

・htmlで直接入れる

・jsであとから入れる

【方法1】htmlで直接埋め込む

htmlで埋め込む場合、jsが必要無いので特有のラグが発生しません。

<iframewidth="853" height="480" src="https://www.youtube.com/embed/JN-bmtN9OjA?rel=0&controls=0&autoplay=1&loop=1&playlist=JN-bmtN9OjA&showinfo=0&modestbranding=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>

このような形でいつも通り埋め込みます。

「rel=0&controls=0&autoplay=1&loop=1&playlist=JN-bmtN9OjA&showinfo=0&modestbranding=1&wmode=transparent」のように色々パラメータつけて“自動再生”だったり“次の動画これ”見たいな指定ができます。

ただhtmlで埋め込む場合問題が１つ発生して、その指定では音をミュートにできないのです。なんでだろ。。

【方法2】jsで埋め込む

最初のcodepenの動画はjsで埋め込んだものです。

まずhttps://www.youtube.com/iframe_apiを読み込む

iframe_apiを埋め込んで下さい。

type1 <htmlに直接書く場合>

<script src="https://www.youtube.com/iframe_api"></script>

type2 <jsで埋め込む場合>

var tag = document.createElement('script');//タグ生成
tag.src = "https://www.youtube.com/iframe_api";//タグのsrc指定
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

htmlにYouTube突っ込む箱を指定して、IDを指定してドン！

html用意して

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

jsでID指定して

// YouTubeの埋め込み
    function onYouTubeIframeAPIReady() {
        ytPlayer = new YT.Player(
            'player', // 埋め込む場所の指定
            {
                videoId: 'JN-bmtN9OjA', // YouTubeのID
                playerVars: {
                    loop: 1,//0:ループしない 1:ループする 1の場合playlist設定必須
                    playlist: 'JN-bmtN9OjA',//次に流すYoutubeのID
                    controls: 0,//コントローラー無し
                    autoplay: 1,//オートプレイ
                    showinfo: 0//動画タイトルなど表示しない
                },
                events: {
                    'onReady': onPlayerReady
                }
            }
        );
    }
//プレイ準備完了後
      function onPlayerReady(event) {
        event.target.playVideo();
        event.target.mute();
      }

NOTE : IDはどこにあるの？

IDはYouTubeを見ているときに[watch?v=]以降にあるやつがおおよそIDになっているかと思います。
ここをコピーすれば大丈夫です。