YouTube動画と連動してあらかじめ設定した時間になると購入ボタンが表示される仕組み（HTML、IFrameプレーヤーAPI（JavaScript）、CSS）

By Yukinobu Kurata (倉田幸暢)

ここでは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を再生しはじめてから、一定時間（２０秒）が経過すると、動画の下に購入ボタンが表示されるように設定しています。

途中で一時停止すると、カウントダウンタイマーも一時停止します。もう一度再生をはじめると、カウントダウンタイマーも動き出します。これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。

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

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

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

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

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

この仕組みは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みです。

わかりやすくいうと、「動画の内容をちゃんと見た人だけつぎのステップに進める」という仕組みです。

動画セールスレターや、オプトインページなどでこの仕組みをつかうと、効果的です。

もし、動画の下にはじめから購入ボタンがついていたら、それを見た人は「この動画は売り込みのための動画だ！」とおもって、抵抗感がうまれてしまいます。

これでは、提案を受け入れてもらいにくくなってしまいます。

そうではなく、はじめは購入ボタンを表示させないようにしておいて、抵抗感なく動画を見はじめてもらい、動画のなかで興味を引いてから、頃合いを見計らって購入ボタンを表示する。

こうすれば、抵抗感を引き起こさずに、自然な流れで提案をおこなうことができるので、提案を受け入れてもらえる確率があがります。

その結果として、成約率やオプトイン率が上がるでしょう。

また、このカウントダウンタイマーは、YouTube動画の一時停止/再生と連動して動きます。なので、動画を一時停止するとカウントダウンタイマーも一時停止し、もう一度動画の再生をはじめると、カウントダウンタイマーも動き出します。

これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。

僕が知るかぎり、このような仕組みはこれまで有料のツールでしか実現できませんでした。

それが、今や、完全に無料で誰でも自由につかうことができるようになりました。

科学の勝利ですね（笑）。

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

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

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

基本的な設定項目

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

//★隠し要素を表示させるまでの時間（分、秒）を設定する。

    		//分
    		var min = 0;

    		//秒
    		var sec = 20;

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

        //横幅
        var videoWidth = 530;

        //縦幅
        var videoHeight = 298;

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

//★カウントダウンタイマーの表示/非表示を設定する。
        //表示「1」 / 非表示「0」
    		var displayCDTimer = 1;

隠し要素を表示させるまでの時間（分、秒）については、つぎのとおりです。
「var min = 0;」の「0」のところに、分数をいれてください。
「var sec = 20;」の「20」のところに、秒数をいれてください。

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

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

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

カウントダウンについては、「var displayCDTimer = 1;」というところの「1」を「0」にすれば、カウントダウンを非表示にすることができます。
（この「カウントダウンの表示機能」は、ちゃんとカウントが動作しているかどうかを確認できるようにするためにつけたものです。なので、最終的にちゃんと動作することが確認できたら非表示にすることができるようにしています。）

「隠し要素」の部分

一定時間経過後に表示される「隠し要素」の部分に変更を加えれば、購入ボタン以外にも、リンクや画像や文章など、好きなものを表示させることができます。「隠し要素」というのは、ソースコードのなかの「hidden_contents」というid名がついた

タグの中身の部分のことです。

<div id="hidden_contents" style="visibility: hidden">

	（指定した時間が経過したときに表示させるもの<br />
    （「購入ボタン」など）を、<br />
	この部分（&amp;lt;div&amp;gt;タグのなか）に記入してください。）<br />
	<br />

	<a id="buy_button" href="http://www.flickr.com/photos/smallgate/4214979201/" target="_blank">購入する</a>

</div>

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

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

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

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

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

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

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

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

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

//設定をおこなう「パラメータ」
playerVars: {
    //左の値は「パラメータの名前」。
    //右の値は「パラメータの値」。
    'modestbranding': 1,
    '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/YouTubeMagicBuyButton/blob/master/MIT-LICENSE.txt

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

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

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

参考にさせていただいたサイト

この仕組み（ソフトウェア）をつくるにあたっては、おもに下記のウェブサイトを参考にさせていただき、その情報やコードを利用させていただきました。

このほかにも、かるく目を通したウェブページまでふくめると、とてもたくさんのページを参考にさせていただきました。ですが、それらのページをすべてここに掲載することはできませんので、そのかわりに、とくに参考にさせていただいたウェブページのリンクを掲載させていただきます。

たくさんの有益な情報を提供していただき、ありがとうございました。
m(_ _)m

カウントダウンタイマー１－JavaScript入門
http://www.pori2.net/js/timer/6.html

YouTube IFrame API：設置サンプル（イベント）
http://phpjavascriptroom.com/exp3.php?f=include/strm/youtubeiframeplayerapi/event.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

ひとつのsetIntervalをclearIntervalで止めずに二回以上連続で動かすとclearInterv... - Yahoo!知恵袋
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1063499895

一定時間で繰り返す（setTimeout）－JavaScript入門
http://www.pori2.net/js/timer/2.html

クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント（1/2）- ＠IT
http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki15/01.html
プログレッシブエンハンスメント（ボタン） - jsdo.it
http://jsdo.it/calmbooks/blogCSS3Button

YouTube APIについての関連記事

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

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

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

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

メルマガ登録

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

Pocket

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

カテゴリー

タグ

コメントを残す