YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み（IFrameプレーヤーAPI（JavaScript））

By Yukinobu Kurata (倉田幸暢)

Pocket

ここでは、「YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を最後まで再生すると、それと同時にリダイレクトで別のページに飛ばされます。（話をわかりやすくするために、動画は50秒ほどの短いものにしています。）

これによって、「動画を最後まで見た人をあらかじめ設定しておいたページに自動的に移動させることができる」という仕組みをつくることができます。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード（HTML、JavaScript、CSS）を見ることができます。

See the Pen
YouTubeEndPointRedirect by 倉田幸暢 (@yukinobukurata)
on CodePen.

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
「HTML」タブ：この仕組みのソースコード（HTML、JavaScript、CSS）のパネルを表示（または非表示）させる。
「Result」タブ：この仕組みのソースコード（HTML、JavaScript、CSS）を実行したときのウェブページの状態を再現したパネルを表示（または非表示）させる。

ソースコードのダウンロードは、こちらをクリック。（GitHubのリポジトリ）

動画マーケティングに応用する方法

動画を最後まで見た後、視聴者の操作を待たずにリダイレクトで自動的に、セールスレターや、オプトインページなどに移動させたいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

カスタマイズして自分用に使う方法（ソースコードの解説）

基本的な設定項目

//★ユーザー用の設定項目

//★動画プレーヤーの横幅と縦幅を設定する（ピクセル数）。

        //横幅
        var videoWidth = 530;

        //縦幅
        var videoHeight = 298;

//★表示させるYouTube動画の「動画ID」を設定する。
        var youtubeVideoID = "Xye1sEOG0CA";

//★リダイレクトさせる移動先のページのURLを設定する。
        var redirectUrl = "https://commons.wikimedia.org/wiki/File:USMC-110917-M-VF198-019.jpg";

//★リダイレクト先のページを新しいウィンドウ（新しいタブ）で開くか、
//  同じページ内で開くかを設定する
        //新しいウィンドウ（新しいタブ）で開く「1」 / 同じページ内で開く「0」
        var redirectTargetBlank = 0;

動画プレーヤーの横幅と縦幅については、つぎのとおりです。
「var videoWidth = 530;」の「530」のところに、横幅をいれてください。
「var videoHeight = 298;」の「298」のところに、縦幅をいれてください。

表示させるYouTube動画については、「var youtubeVideoID = "Xye1sEOG0CA";」の「Xye1sEOG0CA」のところに、表示させたいYouTube動画の「動画ID」をいれてください。

YouTube動画の「動画ID」というのは、YouTube動画の個別視聴ベージのURLのなかの「v=***********」という部分の「***********」の英数字のことです。
下の例でいうと、「Xye1sEOG0CA」という部分が、「動画ID」です。
YouTube動画の個別視聴ベージのURLの例
https://www.youtube.com/watch?v=Xye1sEOG0CA&feature=player_embedded

リダイレクトさせる移動先のページのURLについては、「var redirectUrl = "https://*****";」の「https://*****」のところに、移動先のページのURLをいれてください。

リダイレクト先のページを新しいウィンドウ（新しいタブ）で開くか、同じページ内で開くかについては、「var redirectTargetBlank = 0;」の「0」を「1」にすれば、新しいウィンドウ（新しいタブ）で開き、「0」にすれば、同じページ内で開きます。

YouTube動画プレーヤーの「パラメータ」

YouTubeの動画プレーヤーの「パラメータ」については、下記でご説明している「playerVars:」についての記述の部分で設定できます。

「パラメータ」というのは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための機能です。

たとえば、「パラメータ」を付けることで、下記のようなこともできます。

自動的に再生をはじめる。
コントロールバーを非表示にする。
プログレスバー（シークバー）を非表示にする。
タイトルバーを非表示にする。
全画面表示ボタンを非表示にする。
動画全体のなかの一部分だけを再生する。
（再生を開始する時点と、再生を終了する時点を指定する。）
複数の動画を連続して再生させる。
すべての動画の再生が終わったら、また最初の動画にもどってそれを繰り返す。

それぞれの機能を実現するための「パラメータ」の使い方や実例などの
くわしい説明については、下記の記事を参照してください。

参考：YouTube動画の22のパラメータまとめ+αと埋め込みコードの実例

下記の例でいうと、「'modestbranding': 1」や、「'rel': 0」の部分が、それぞれ個々の「パラメータ」です。

個々の「パラメータ」の後ろには必ず「,」（半角のカンマ）をつけてください。
これを付けないと正常に機能しなくなってしまいます。（最後の「パラメータ」の後ろには「,」は不要です。）

//設定をおこなう「パラメータ」
playerVars: {
		//左の値は「パラメータの名前」。
		//右の値は「パラメータの値」。
		'modestbranding': 1,
		'controls': 1,
		'showinfo': 0,
		'rel': 0

},

上記の例のなかの各パラメータの詳細については、下のそれぞれのリンクをクリックして確認してください。

「IFrameプレーヤーAPI」について

上の実例では、「IFrameプレーヤーAPI」の仕組みを利用して、JavaScriptをつかって、YouTubeの動画プレーヤーを制御しています。

「IFrameプレーヤーAPI」は、HTML5の<iframe>タグをつかって動画プレーヤーを表示させるようになっているので、プラットフォームの違いに対して柔軟に対応することができます。そのため、Flash形式の動画プレーヤーを表示できないスマートフォンなどのモバイル機器でも、埋め込み動画プレーヤーのYouTube動画を問題なく見ることができます。

また、JavaScriptの「イベントリスナー」の機能をつかうことができるので、YouTube動画に関する「イベント」が発生したときに、あらかじめ指定した動作をさせることもできます。

今回の仕組みの場合は、「イベントリスナー」の機能をつかって、動画の再生状態が「再生が完了した状態」に変わるという「イベント」が発生したときに、あらかじめ設定している命令（「リダイレクトで別のページに移動させる」という命令）を出すようにしています。

さきほどお話した「パラメータ」をつかうこともできます。

商用利用でも、有料販売でも、改造でも、なんにでも、自由に無料でつかってください（ライセンスについて）

このページでお話している仕組み（ソフトウェア）は、MITライセンスのもとでオープンソースソフトウェアとして配布しています。

条件を守っていただけるのであれば、誰でも自由に無料で、このソフトウェアをつかっていただくことができます。

このソフトウェアをコピーしてつかったり、配布したり、変更を加えたり、変更を加えたものを配布したり、商用利用したり、有料で販売したりと、なんにでも自由につかってください。

このソフトウェアを利用するには、「著作権表示」と「ライセンスの全文」を掲載することと、無保証であることを受け入れることという条件を守っていただく必要があります。

このソフトウェアの場合、「著作権表示」と「ライセンスの全文」の掲載については、ソースコードのなかや、同梱の別ファイルなどに下記の記述を掲載していただくだけでかまいません。

Copyright (c) 2013 Yukinobu Kurata
Released under the MIT license
https://github.com/YukinobuKurata/YouTubeEndPointRedirect/blob/master/MIT-LICENSE.txt

「Copyright (c) 2013 Yukinobu Kurata」という部分は、「著作権表示」の部分です。
「Released under the MIT license」という部分は、「MITライセンスのもとで配布されている」ということを示しています。
最後のURLは、「ライセンスの全文」が掲載されているページのURLです。

（参考）
MITライセンスの詳しい説明は、下のページでお話しています。

MITライセンスについて
https://wisdommingle.com/mit-license/

YouTube APIについての関連記事

下の記事は、「YouTubeのAPI」についての、そのほかの関連記事です。
YouTubeのAPIについてもっと知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。

YouTubeのうまい使い方についての関連記事

下の記事は、「YouTubeのうまい使い方」についての関連記事です。
YouTubeのうまい使い方について知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。

YouTubeを活用した「インタラクティブ動画プロモーション」の実例をご紹介します

メルマガ登録

いろんな分野のごちゃまぜメルマガ

Pocket

こちらの記事も、おすすめです

カテゴリー

タグ