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

2020.09.14

WEB

Web全般

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

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

INDEX

webサイトにYouTube動画を埋め込む方法
YouTube APIとは
YouTube APIの基本操作
さいごに

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

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

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

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

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

参考

【YouTube】webサイトに動画を埋め込む方法は？レスポンシブデザインに対応した埋め込みタグをご紹介！

YouTube APIとは

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

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

これにより、例えば

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

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

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

YouTube APIの基本操作

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

<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>

    <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);

      function onYouTubeIframeAPIReady() {
        new YT.Player('player', {
          videoId: 'M7lc1UVf-VE',
        });
      }
    </script>
  </body>
</html>

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

引用

https://developers.google.com/youtube/iframe_api_reference?hl=ja

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

function onYouTubeIframeAPIReady() {
    new YT.Player('player', { // ここをHTMLのID属性の値に
        videoId: 'M7lc1UVf-VE', // ここを掲載したい動画のIDに
    });
}

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

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

YouTube IFrame Player API

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

さいごに

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

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

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

参考

【YouTube】お気に入りの動画を整理できる「再生リスト」を作って共有してみよう！

この記事を書いた人

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。