• コーディング

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

Posted on 2017年7月28日

最近、動画をアイキャッチに使っていたり背景に使っているサイトが多いですね。基本的なやり方をまとめておきます。

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

とりあえずDEMOを用意しました。
iPhoneなどのスマホでは自動再生されずに再生ボタンが表示されます。スマホ用に代替え画像などを用意しましょう。
DEMO

1.IFrame Player APIの基本

今回は、IFrame Player APIを使用してYouTube動画を埋め込みます。指定したHTMLの要素がiframe要素に置き換わり、動画を表示してくれます。様々な制御もできて便利です。

ただし、この方法ではブラウザのファーストビューに動画サイズをピッタリとあわせることができません(できるが思いつかないだけかも)。もしそのような使い方をしたい場合は、jquery.mb.YTPlayerというjQueryプラグインを使うと簡単です。 ファーストビューにフィットする動画の埋め込み

今回はDEMOのようなレスポンシブでの動画の埋め込みを行います。
DEMO

1.埋め込む場所を用意する

まず、HTMLの任意の場所に埋め込み用の要素を用意します。

この中で動画の埋め込みに直接必要なのはid=”mv”のDIVだけです。このDIV要素がブラウザに表示される時、iframe要素に置き換わります。その親要素・祖先要素は動画をレスポンシブにする為に、後でCSSで設定するので入れています。id名も任意のもので構いません。

2.IFrame Player API関数の読み込み

jsでIFrame Player API関数を読み込みます。ここの記述はそのままコピペで大丈夫です。 また、IFrame Player API関数の利用自体にはjQueryは必要ありません。

3.埋め込む動画を設定

先程の記述の後に、埋め込む動画を設定するためのコードを書きます。埋め込み用に作ったDIV要素のIDや動画のID、パラメータの設定などはコメントを参考に任意で指定してください。イベント設定は後でonPlayerReady関数やonPlayerStateChange関数を実行する場合、必要になります。

とりあえずこれだけで動画の埋め込みは完了します。

2.イベントの利用

onPlayerReady関数やonPlayerStateChange関数を使うことで、プレイヤーの準備が完了したタイミングで実行させたい処理や、プレイヤーの状態が変化(再生から一時停止など)したタイミングで実行させたい処理などを命令することができます。

これらの関数を利用するためには、1-3で説明したように各イベント設定の記述が必要です。また、処理コードにjQueryを使いたい場合は先にjQuery本体を読み込ませてください。

1.プレイヤーの準備が完了したら実行(onPlayerReady関数)

onPlayerReady関数では、プレイヤーの準備が完了したら実行する処理を命令できます。次の例では、準備完了後に動画を再生するので、自動再生することができます。

2.プレイヤーの状態が変化したら実行(onPlayerStateChange関数)

onPlayerStateChange関数は、再生されていた動画が終了した時など、プレイヤーの状態が変化したタイミングでの処理を命令できます。動画が終了したら動画を非表示にすることなどが可能です。

3.制御ボタンを作る

予め用意されている制御ボタン(一時停止ボタンなど)ではなく、オリジナルの要素に制御機能をつけたい場合は、次の方法で可能になります。

1.ボタンを準備

HTMLにボタンを準備します。要素やID名は任意で構いません。

2.エラー回避の準備

もし、プレイヤーの準備が完了する前に、制御ボタンを押してしまうとエラーになってしまいます。そのため、制御ボタンはプレイヤーの準備が完了してから機能するようにします。先程のonPlayerReady関数を利用してプレイヤーの準備が完了したら、変数に特定の値が代入されるようにしておきましょう。

3.制御ボタンの処理を指定

先程の変数がプレイヤーの準備が完了した時に代入したものと一致した時だけ、処理を実行させます。セレクタは先程指定したIDに合わせてください。

4.動画をレスポンシブにする

最後に動画が画面の横幅いっぱいのレスポンシブにCSSで調整します。56.25%は動画の大きさが幅640px・高さ360pxとした時の割合です。比率が異なる場合は任意で書き換えてください。

この記事はこちらのサイトを参考にさせて頂いています。
YouTube Player APIを使って色々やってみる | Tips Note by TAM