YouTubeの動画をサイトに埋め込みたい場合は、YouTubeの『共有』→『埋め込みコード』でIFRAMEの埋め込み用コードを取得してサイトに貼り付けます
Fun to Drive, Honda! NSX Image篇
普通はこれでいいですが、ちょっと複雑にしたい場合ってないですか
・再生状況を取得したい
・早送り、巻き戻しをしたい
・複数の動画をセットして連続して見せたい
などなど
ちょっと工夫してYouTube動画を埋め込みたい場合に利用するのがIFrame Player APIです
これはAPIキーを取得しなくても利用できるので敷居が低く、且つバラエティに富んだ使い方ができます
『基本の準備』
APIという名前がつくと複雑な気がしてきますが、IFrame Player APIはJavaScriptを使って制御できるAPIですし、とにかく手をつけてみれば意外と簡単に遊べます
ページの動画を表示させたい部分に
|
1 |
<div id="player"></div> |
を記述します
本当にこれだけ。後はJavaScript側で色々操作します
『JavaScriptファイルの基本』
JavaScriptファイルを作ります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//IFrame Player API用のJavaScriptを呼び込んで、ページの<script>タグとして埋め込みます var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); //上記のJavaScriptの読み込みが完了すると実行され、再生用のプレイヤーが準備されます //ここでは、高さ315px、幅560pxでvideoIdがZxnRp4p9SGkの動画をセットするようになっています var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '315', width: '560', videoId: 'ZxnRp4p9SGk', events: { } }); } //上記の記述でプレイヤーの準備が整うと実行されます //ここでは、プレイヤーの準備が整えば再生を開始するようになっています function onPlayerReady(event) { event.target.playVideo(); } |
これで下記のように動画が埋め込まれます
埋め込みコードを使った場合と同じですね
とりあえずは同じ状態を作ってみましたが、普通に動画を埋め込みたい場合はYouTubeから提供される埋め込み用コードを使ったほうが断然便利です
次からはちょっとずつ工夫を加えてみます