ビジネスとIT活用に役立つブログBlog


YouTube IFrame Player APIを利用してwebサイトに動画を埋め込む(導入編)

この記事をシェアする:

お客様のwebサイト制作を手伝わせていただくにあたり、ページ内に動画を掲載したいというご要望をいただくことが多くなりました。動画の掲載方法は様々ですが、YouTubeの普及に伴い、同サービスが提供する埋め込みタグやAPIサービスを利用する形での対応が一般的となってきています。

そこで本記事ではYouTube Iframe Player API(以下YouTube API)の利用方法をご紹介します。

webサイトにYouTube動画を埋め込む方法

webサイトにYouTubeの動画を埋め込むには

  • 埋め込み用のタグを利用する
  • YouTube APIを利用する

の2つの方法が用意されています。

埋め込みタグの利用については当ブログでも記事にしていますのでこちらも参考にしてください。


YouTube APIとは

YouTube APIを利用することでJavaScriptを介してYouTubeの動画を制御できるようになります。

埋め込み用のタグでは静的に動画を埋め込むことしかできませんでしたが、YouTube APIを利用することで動画を動的に扱うことができるようになります。

これにより、例えば

  • 動画を再生するタイミングをコントロールする
  • 動画の再生状況を取得する
  • オリジナルの再生ボタンなどを作成する

といった、より細かく柔軟な対応が可能になります。

埋め込みタグとは違いJavaScriptの記述が必要になるので、特にデザイナーの方は苦手意識があるかもしれませんが、非常に簡単なコードで動画を埋め込むことができるようになっています。

YouTube APIの基本操作

YouTube APIを利用するには動画プレイヤーを挿入するためのHTMLとYouTubeが提供しているJavaScriptコードをページに記述します。

上記ソースコードはYouTubeの公式リファレンスに掲載されているサンプルコードを簡略化したものです。

上記ソースコードの中で修正が必要なのは2個所だけで、 ‘player’ の部分をHTMLに付与したID属性の値に、 ‘M7lc1UVf-VE’ の部分を掲載したい動画のIDに変更します。

これだけで動画の掲載が可能になります。とても簡単ですね。

上記では説明のために非常に簡略化した例を載せましたが、オプションやイベント、ビルトインのメソッドを利用することで様々なカスタマイズも可能となっています。詳細は公式サイトをご確認ください。

また、先述しました通り、JavaScriptを利用することで独自の再生ロジックやページ内の他の要素と連動した再生コントロールなども可能になります。具体例に関してはまた別の記事で紹介できればと思います。

さいごに

いかがでしたでしょうか。今回はYouTube APIを利用してwebサイトに動画を埋め込む方法についてご紹介しました。

埋め込みタグとYouTube APIの利用は一長一短ありますので、仕様や要件に合わせて使い分けができるようにしておくとより魅力的なwebサイトの制作に繋がると思います。

また下記の記事ではYouTubeで作成した再生リストをwebサイトに埋め込む方法をご紹介していますので、こちらも是非ご活用ください。



この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!