YouTube Player APIの使い方 – 初期表示篇

YouTubeの動画をサイトに埋め込みたい場合は、YouTubeの『共有』→『埋め込みコード』でIFRAMEの埋め込み用コードを取得してサイトに貼り付けます

YouTube埋め込み用コード


Fun to Drive, Honda! NSX Image篇

普通はこれでいいですが、ちょっと複雑にしたい場合ってないですか

・再生状況を取得したい
・早送り、巻き戻しをしたい
・複数の動画をセットして連続して見せたい
などなど

ちょっと工夫してYouTube動画を埋め込みたい場合に利用するのがIFrame Player APIです
これはAPIキーを取得しなくても利用できるので敷居が低く、且つバラエティに富んだ使い方ができます

『基本の準備』
APIという名前がつくと複雑な気がしてきますが、IFrame Player APIはJavaScriptを使って制御できるAPIですし、とにかく手をつけてみれば意外と簡単に遊べます

ページの動画を表示させたい部分に

を記述します
本当にこれだけ。後はJavaScript側で色々操作します

『JavaScriptファイルの基本』
JavaScriptファイルを作ります

これで下記のように動画が埋め込まれます

埋め込みコードを使った場合と同じですね

とりあえずは同じ状態を作ってみましたが、普通に動画を埋め込みたい場合はYouTubeから提供される埋め込み用コードを使ったほうが断然便利です

次からはちょっとずつ工夫を加えてみます