投稿日：2019年3月31日
簡単にYOUTUBE動画をサイトに埋め込む方法｜YouTube Player APIで埋め込み動画を使いこなす
最近動画を用いたサイトが劇的に増えていますね。
私が3月にコーディングを担当した案件のうち2案件は動画が含まれる案件ということがその現実を物語っているかのようです。動画も昔から多くありますが、最近ではウェブでの訴求力を高める目的の上では確実に取り入れるべき要素であると考えています。予算に余裕があるならばまずは動画を作ることを主軸に添えていくべきではないかと個人的には思いますね。
今日は動画を埋め込む方法としてmp4などの動画ファイルをvideo要素で埋め込む方法とは違って、YOUTUBE動画をサイトに埋め込む方法について書いてみることにしたいと思います。
YOUTUBE動画を埋め込む方法
この方法は YOUTUBE に既に動画がアップロードされている状態からの説明とさせていただきますので、YOUTUBE に動画をアップロードする方法については別途検索してみてくださいね。それでは、解説してみたいと思います。
埋め込みたいYOUTUBE動画のページから iframe 要素を取得する
ここでは「料理手覚えるオブジェクト指向Part.01」の動画を参考にサイトに埋め込むまでの流れを説明してみたいと思います。
https://www.youtube.com/watch?v=q2pibQmexcs
まずはYOUTUBEの該当の動画のあるページに遷移する必要がありますので以下のページに遷移してみてください。
https://www.youtube.com/watch?v=q2pibQmexcs
動画のすぐ下にある共有をクリックします。
クリックすると開かれるモーダルダイアログから埋め込むをクリックします。
埋め込みコードが表示されるので、コピーしてサイトに貼り付けます。
以上で埋め込みコードの取得は完了です。
関連動画を同じチャンネル内の動画に限定する
YOUTUBE埋め込み型でサイトに動画を掲載する場合には、YOUTUBEの再生が終わったタイミングで関連動画が表示されてしまいます。2018年の夏ごろ以前までは関連動画を表示させない設定ができたのですが、昨年のどこかのタイミングで関連動画非表示が不可能になりました。
現在は確実な何かしらの関連動画が表示されてしまうことになりそうですが、関連動画の表示をある程度制御することは可能です。
具体的にはYOUTUBE埋め込みのURLパラメータの後ろに「rel=0」というパラメータを付与してあげればOKです。これによって関連動画を同一チャンネル内の動画に限定することが可能です。
iframeの埋め込み動画をJavaScriptで操作する
YOUTUBE動画をモーダルで埋め込む場合などには、モーダルを表示した処理の後に自動再生させたり、モーダルを非表示に変更したときに再生を止めるといった処理が必要になります。iframe の埋め込みでこれらを実現するための用意されている機能が YouTube Player APIです。
jQuery でモーダルを表示させたり、ビデオの再生状態を制御するためのサンプルとしては以下のようなものがあります。
iframeの埋め込みの範囲でもPlayer APIを経由することによって様々なYOUTUBE動画の制御が可能になります。詳しくは以下のページに詳細がありますのでご確認ください。
iframe 組み込みの YouTube Player API リファレンス
https://developers.google.com/youtube/iframe_api_reference?hl=ja
その他のパラメータ
その他のパラメータとしては以下のページにまとめられていますので一度目を通してみてください。
よく使うものとしてはページ読み込み時に自動再生するための autoplay や 動画コントロールの表示非表示を制御するための controls 、ループ再生を制御するための loop などがあります。詳しくは以下のページに記載がありますので参照してみてください。
YouTube埋め込みプレーヤーとプレーヤーのパラメータ
https://developers.google.com/youtube/player_parameters?hl=en#release_notes_08_23_2018
参考URL
詳しくは以下のページに書いてあります。私自身も英語が得意ではないのですが、頑張って読むということがエンジニアには必要です。日本語情報に訳して頂けている方々のブログなどを見るのも一つの方法ですが、情報の鮮度には気をつけましょう。やはり公式が一番安全です。
YouTube埋め込みプレーヤーとプレーヤーのパラメータ
https://developers.google.com/youtube/player_parameters?hl=en#release_notes_08_23_2018
iframe 組み込みの YouTube Player API リファレンスhttps://developers.google.com/youtube/iframe_api_reference?hl=ja
まとめ
YouTubeの埋め込み動画でもそれなりの制御を行うことは可能です。関連動画を完全に表示させたくないといった要件がなければ、通信帯域の面やストレージ容量の面、表示速度の面など、様々な面でメリットがありますので、ぜひYouTube Player API を経由したiframe動画の埋め込みにチャレンジしてみてください。
