色んなサイトでYoutubeの動画を埋め込んでいるのを見かけるが、あれはどうやっているのだろう。
一番手っ取り早いのは、動画のページで「共有」→「埋め込みコード」と選択するとHTMLのコードが生成されるので、これを好きな場所にコピペすれば良い。
Youtube_ss1
では、ページが表示されたら自動再生したい場合はどうすればいいだろう。
そういう時は、Youtube公式のIFrame Player APIを使えばいい。
 
それでは早速準備を始めよう。
まずはHTMLだ。
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test</title>
    
    <script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="./js/video.js"></script>
</head>

<body>

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

</body>
</html>
要素としてはplayerというidのdivが一つだけだ。
APIを使ってここに動画を埋め込む処理を行う。
video.jsを記述しよう。

1.Youtubeの動画を埋め込むために必要なAPIの設定だ。
 これはまあ、おまじないと考えていいだろう。
2.Playerオブジェクトを生成する。
 ここには他にも色々なパラメータを設定することが出来るが、詳細は公式ドキュメントを参照して欲しい。
 iframe 組み込みの YouTube Player API リファレンス - YouTube — Google Developers
3.動画の準備が出来たら呼ばれるコールバック関数だ。
 この中で再生開始させるとページが読み込まれた時に自動的に動画を再生させたり出来る。
4.状態が変更されると呼ばれるコールバック関数だ。
 一時停止であったり、再生終了だったりの状態変化が起きると呼ばれる。
 とりあえず、今は気にしなくて良い。

それでは実行してみよう!
…何も表示されないはずだ。
そう、実は上のコードには間違いがある。

javascript - Youtube iframe api not triggering onYouTubeIframeAPIReady - Stack Overflow
によると、onYouTubeIframeAPIReady()関数はグローバルにしておかなければいけないとのことだ。
よって、次のように変更しよう。

それではもう一度実行してみよう。
今度は正常に動画が表示された!

Chrome、Firefox、IEの3つで正常に動いているから、これは完成と言って良いだろう。

動画の上に要素を重ねる
動画の上に何らかの要素を重ねたい時もあるだろう。
(例えば、ニコニコ動画のコメントのようにだ。)

よってここではdiv要素を動画の上に置いてみる。
次のようにHTMLに要素を追加しよう。

これで、動画の左上らへんに四角が表示されるはずだ。
実行してみよう。

Chrome…OK
Firefox…OK
IE…NG

なんということだ。
おそらく世間の多くのエンジニアはこう呟くことだろう。
「またIEか」
しかし、嘆いていても始まらない。
IEを非対応にすることを許してくれる顧客はおそらく極少数だろう。
何とか解決しなければならない。

Youtube iframe wmode issue - Stack Overflow
によると、Playerオブジェクトの生成時にwmodeというパラメータを設定してやればいいとのことだ。
早速やってみよう。

さて、再度実行してみよう。
おかしい、まだ正常に表示されない。

原因を探るためにIEの開発者ツールを見てみよう。
コンソールを見ると、以下の様なエラーが延々と吐かれているのがわかるはずだ。
SCRIPT87: 引数が無効です。
これだけでは何が悪いのか分からない。
色々と試してみた結果、どうやらWebサーバを経由して動かさないといけないようだ。

× file:///D:/video.html
◯ http ://localhost/video.html


Webサーバを経由したら上記のエラーは出ず、ちゃんと#overlay要素が表示された!
※この時、Ctrl+F5で更新しないと正常に表示されなかったことを付け加えておく。

動画を自動再生する
最後に、自動再生を行ってみよう。
これは非常に簡単だ。
video.jsのonPlayerReady関数に次の一行を追加するだけでいい。

Chrome、Firefox、IEで、無事に自動再生することが出来た!

参考文献
iframe埋め込み版 YouTube Player API | YouTube API プログラミング解説
youtube | hirokona