YouTube動画を背景全画面で再生する

YouTube動画を配置する要素をdocument.querySelectorで取得します。

YouTube動画は指定した要素をiframeに変えて表示します。
（詳しくは Youtube IFrame Player API を参照してください。）
そのため、iframeに書き変わるdiv要素を子要素に持つようにしておきます。

動画を背景全画面に配置するため、サイズを特定していきます。
baseWidth / baseHeightの値は動画プレイヤーの初期値です。
これを使って横幅を比率を求め、変数widthRatioに保持しておきます。
現在の画面サイズがwidthRatioを超えているかどうか？の判定結果を変数isWideWindowに保持しておきます。
最終的なサイズはisWideWindowとwidthRatioを使い、現在の画面サイズに演算して求めます。

スタイルを当てていきます。
背景に固定表示するためのスタイルと、再生が開始されるまで画面がチラつかないようにopacity: 0;を当てておきます。
isWideWindowを使い、動画が画面中央になるように位置調整をしておきます。

動画プレイヤーの設定をしていきます。
準備できた動画プレイヤーを保持しておくための変数playerを定義しておきます。

まずは動画の設定が可能になった時に呼び出させれる関数を定義します。
Youtube IFrame Player API を参考にしつつ、引数に先に求めていた動画サイズの指定、YouTube動画を配置する要素に指定してあった動画IDの取得と指定、この後に呼び出される各関数の指定をしておきます。

次に動画プレイヤーの準備ができた時に呼び出される関数を定義します。
自動再生をするためにミュートにしてから再生を指示します。

続いて再生状況が変わった時に呼び出される関数を定義します。
引数に渡ってくるオブジェクトのdataというプロパティには、状況を判断できる数値が入っています。
1は再生が始まったことを表しています。
この段階でopacity: 0;で非表示にしていた動画プレイヤーを表示状態に戻します。
0は再生時間が最後まで到達し、終了したことを表しています。
再生をループさせるため、再度動画再生を指示します。

最後に設定の呼び出しを開始します。
Youtube IFrame Player APIを使うためにscriptを配置し、最初に呼び出されるonYouTubeIframeAPIReadyをwindowプロパティに指定することでグローバルな呼び出しを可能にします。