最近、動画をアイキャッチに使っていたり背景に使っているサイトが多いですね。基本的なやり方をまとめておきます。
とりあえずDEMOを用意しました。
iPhoneなどのスマホでは自動再生されずに再生ボタンが表示されます。スマホ用に代替え画像などを用意しましょう。
DEMO
1.IFrame Player APIの基本
今回は、IFrame Player APIを使用してYouTube動画を埋め込みます。指定したHTMLの要素がiframe要素に置き換わり、動画を表示してくれます。様々な制御もできて便利です。
ただし、この方法ではブラウザのファーストビューに動画サイズをピッタリとあわせることができません(できるが思いつかないだけかも)。もしそのような使い方をしたい場合は、jquery.mb.YTPlayerというjQueryプラグインを使うと簡単です。 ファーストビューにフィットする動画の埋め込み
今回はDEMOのようなレスポンシブでの動画の埋め込みを行います。
DEMO
1.埋め込む場所を用意する
まず、HTMLの任意の場所に埋め込み用の要素を用意します。
|
1 2 3 4 5 |
<div id="mvbox"> <div id="mvbox-inner"> <div id="mv"></div> </div> </div> |
この中で動画の埋め込みに直接必要なのはid=”mv”のDIVだけです。このDIV要素がブラウザに表示される時、iframe要素に置き換わります。その親要素・祖先要素は動画をレスポンシブにする為に、後でCSSで設定するので入れています。id名も任意のもので構いません。
2.IFrame Player API関数の読み込み
jsでIFrame Player API関数を読み込みます。ここの記述はそのままコピペで大丈夫です。 また、IFrame Player API関数の利用自体にはjQueryは必要ありません。
|
1 2 3 4 5 |
// IFrame Player API JavaScript コードの読み込み var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); |
3.埋め込む動画を設定
先程の記述の後に、埋め込む動画を設定するためのコードを書きます。埋め込み用に作ったDIV要素のIDや動画のID、パラメータの設定などはコメントを参考に任意で指定してください。イベント設定は後でonPlayerReady関数やonPlayerStateChange関数を実行する場合、必要になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// YouTubeの埋め込み var ytPlayer; function onYouTubePlayerAPIReady() { ytPlayer = new YT.Player( 'mv',// iframeに差し替えたいdivのID { width: '100%',// プレイヤーの高さ height: '100%',// プレイヤーの幅 videoId: 'z9QNDGwVTW4',//動画のID // イベントの設定 events: { 'onReady': onPlayerReady, // プレーヤー準備完了後、onPlayerReady関数を実行 'onStateChange': onPlayerStateChange // プレーヤー状態変更時、onPlayerStateChange関数を実行 }, // パラメータの設定 playerVars: { autoplay: 1, // 自動再生(0:しない,1:する) controls: 0, // コントロールバー(0:非表示,1:表示,2:動画再生後に表示) //listType: playlist, // 再生リストを表示 //listType: search list, // listパラメータで指定した文字列で検索した動画を再生リストに表示 //listType: user_uploads, // YouTubeチャンネルを表示 //list: ***, // listTypeパラメータがplaylistの時、再生リストIDを指定 //list: ***, // istTypeパラメータがsearch listの時、検索する文字列を指定 //list: ***, // istTypeパラメータがuser_uploadsの時、YouTubeチャンネルを指定 loop: 0, // ループ再生(0:しない,1:する)※単一の動画の場合、同じ動画IDをplaylistパラメータの値に設定 //playlist: ***,***,***, //最初の動画再生後、IDで指定した動画を順番に再生(値は動画ID) rel: 0, // 再生終了後、関連動画を表示(0:非表示,1:表示) showinfo: 0, // 動画再生前にタイトルを表示(0:非表示,1:表示) //start: **, //指定秒数から動画再生 //end: **, // 指定秒数後、動画を停止 wmode: 'transparent', // プレーヤーを背面に表示する } } ); } |
とりあえずこれだけで動画の埋め込みは完了します。
2.イベントの利用
onPlayerReady関数やonPlayerStateChange関数を使うことで、プレイヤーの準備が完了したタイミングで実行させたい処理や、プレイヤーの状態が変化(再生から一時停止など)したタイミングで実行させたい処理などを命令することができます。
これらの関数を利用するためには、1-3で説明したように各イベント設定の記述が必要です。また、処理コードにjQueryを使いたい場合は先にjQuery本体を読み込ませてください。
1.プレイヤーの準備が完了したら実行(onPlayerReady関数)
onPlayerReady関数では、プレイヤーの準備が完了したら実行する処理を命令できます。次の例では、準備完了後に動画を再生するので、自動再生することができます。
|
1 2 3 4 |
function onPlayerReady(event) { // 動画再生(※自動再生ということ) event.target.playVideo(); } |
2.プレイヤーの状態が変化したら実行(onPlayerStateChange関数)
onPlayerStateChange関数は、再生されていた動画が終了した時など、プレイヤーの状態が変化したタイミングでの処理を命令できます。動画が終了したら動画を非表示にすることなどが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
function onPlayerStateChange(event) { // 現在のプレーヤーの状態を取得 var ytStatus = event.data; // 再生終了した時の処理 if (ytStatus == YT.PlayerState.ENDED) { // 動画再生(※ループということ) // event.target.playVideo(); // 動画を非表示にする $('#mvbox').css('opacity','0'); } // 再生中の時の処理 if (ytStatus == YT.PlayerState.PLAYING) { // 処理 } // 停止中の時の処理 if (ytStatus == YT.PlayerState.PAUSED) { // 処理 } // バッファリング中の時の処理 if (ytStatus == YT.PlayerState.BUFFERING) { // 処理 } // 頭出し済み時の処理 if (ytStatus == YT.PlayerState.CUED) { // 処理 } } |
3.制御ボタンを作る
予め用意されている制御ボタン(一時停止ボタンなど)ではなく、オリジナルの要素に制御機能をつけたい場合は、次の方法で可能になります。
1.ボタンを準備
HTMLにボタンを準備します。要素やID名は任意で構いません。
|
1 2 3 4 5 6 7 |
<a id="play">再生</a> <a id="pause">一時停止</a> <a id="prev">巻戻し</a> <a id="next">早送り</a> <a id="volup">音量アップ</a> <a id="voldown">音量ダウン</a> <a id="mute">ミュート</a> |
2.エラー回避の準備
もし、プレイヤーの準備が完了する前に、制御ボタンを押してしまうとエラーになってしまいます。そのため、制御ボタンはプレイヤーの準備が完了してから機能するようにします。先程のonPlayerReady関数を利用してプレイヤーの準備が完了したら、変数に特定の値が代入されるようにしておきましょう。
|
1 2 3 4 5 6 7 8 |
// プレイヤーの準備が完了するまで、変数playerReadyをfalseにする var playerReady = false; // onPlayerReady関数(プレイヤー準備完了後に実行) function onPlayerReady(event) { // 変数playerReadyをtrueにする playerReady = true; } |
3.制御ボタンの処理を指定
先程の変数がプレイヤーの準備が完了した時に代入したものと一致した時だけ、処理を実行させます。セレクタは先程指定したIDに合わせてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
// 動画の制御ボタンの処理 $(function() { // 再生ボタン $('#play').on('click', function() { if(playerReady) { ytPlayer.playVideo(); } }); // 一時停止ボタン $('#pause').on('click', function() { if(playerReady) { ytPlayer.pauseVideo(); } }); // 巻戻しボタン $('#prev').on('click', function() { if(playerReady) { // 現在の再生時間取得 var currentTime = ytPlayer.getCurrentTime(); // シークバーの移動 ytPlayer.seekTo(currentTime - 60); } }); // 早送りボタン(動画時間に調整してスキップボタンにもできる) $('#next').on('click', function() { if(playerReady) { // 現在の再生時間取得 var currentTime = ytPlayer.getCurrentTime(); // シークバーの移動 ytPlayer.seekTo(currentTime + 60); } }); // 音量アップボタン $('#volup').on('click', function() { if(playerReady) { // 現在の音量取得 var currentVol = ytPlayer.getVolume(); ytPlayer.setVolume(currentVol + 10); } }); // 音量ダウンボタン $('#voldown').on('click', function() { if(playerReady) { // 現在の音量取得 var currentVol = ytPlayer.getVolume(); ytPlayer.setVolume(currentVol - 10); } }); // ミュートボタン $('#mute').on('click', function() { if(playerReady) { // ミュートされているかどうか if(ytPlayer.isMuted()) { // ミュートの解除 ytPlayer.unMute(); } else { // ミュート ytPlayer.mute(); } } }); }); |
4.動画をレスポンシブにする
最後に動画が画面の横幅いっぱいのレスポンシブにCSSで調整します。56.25%は動画の大きさが幅640px・高さ360pxとした時の割合です。比率が異なる場合は任意で書き換えてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#mvbox { width: 100%; } #mvbox-inner { width: 100%; position: relative; /* 幅640px・高さ360pxの動画を埋め込む場合(高さ÷幅×100) */ padding-top: 56.25%; } #mvbox-inner iframe { position: absolute; left: 0; top: 0; } |
この記事はこちらのサイトを参考にさせて頂いています。
YouTube Player APIを使って色々やってみる ｜ Tips Note by TAM