MY@web

ECショップのコンバージョンUPについて

*

fancybox.jsでYoutube動画をLightboxで表示

   

LightBoxのように画像を表示できるfancybox.jsですが、Youtubeの動画やGoogle Map、Instagramなどもできます。
サンプルはこちら

 

今回はある案件で、「Youtubeの動画を、画像をクリックしたら見れるようにしたい」というのがあり、その覚書の意味もありまとめております。

たしかに、近年はECショップでも動画の活用が盛んになってきており、ページに埋め込んでいますが、1ページに縦に並んで動画がいくつもあると、お客様視点からも見にくくなっていると思います。

参考にしたのは、こちらのページ

fancybox
http://fancyapps.com/fancybox/

jQuery fancyBox v2 の使い方や設定
http://www.webdesignleaves.com/wp/jquery/1358/

 

動画の埋め込みコードの取得

まずは、おさらいとして、動画を自社HPに埋め込むには、Youtubeに動画をアップし、「共有」→「埋め込みコード」を選択。

次に、「もっと見る」を選択し、「動画サイズ」を選んだあと、
「動画が終わったら関連動画を表示する」のチェックを外します。

チェックを外す
このチェックを外しておかないと、動画完了後に、自社とは関係のない関連動画が表示された状態で終了します。

関連動画が表示される

動画をHPに埋め込む

Youtubeでの埋め込みコードはこのようになっており、通常はそのまま埋め込みます。

<iframe src="https://www.youtube.com/embed/PbC-Xe_n0pc?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

 

※ここではCANONさんの動画を使用させて頂いております。(すみません)
通常このままでよいのですが、fancybox.jsを使用してLightboxで表示させる場合、「jQuery fancyBox v2 の使い方や設定」では、

クラス属性に「fancybox.iframe」を追加するか、data-fancybox-type 属性に「iframe」を指定する。
必要に応じて autoplay=1(自動再生) または autoplay=0(自動再生なし)を指定。

 

と記載されており、そのソースがこちらです。

<a class="youtube fancybox.iframe" data-fancybox-group="group1" href="//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=0">And I Love Her </a>

 

「data-fancybox-group=”group1″」を削除して、テキストリンクの「And I Love Her」をわかりやすく、「クリックして動画を見る」に変更すると、このようになります。

<a class="youtube fancybox.iframe" href="//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=0">クリックして動画を見る </a>

 

ここで、最初のYoutubeでの埋め込みコードとを比べるとリンク先の最後が「?rel=0」「?autoplay=0」となっています。

 

埋め込みコード
しかし、普通にリンク先をYoutubeで取得した埋め込みコードのリンク先を指定すれば問題ありません。
href=”//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=0

href=”https://www.youtube.com/embed/PbC-Xe_n0pc?rel=0
Lightboxが立ち上がっても再生ボタンを押さないと再生しません。
完成したソースがこちらです。

 

<a class="youtube fancybox.iframe"  href="https://www.youtube.com/embed/PbC-Xe_n0pc?rel=0">クリックして動画を見る </a>
<script>
jQuery(function($){
 
    $(".youtube").fancybox({
        maxWidth : 800,
        maxHeight : 600,
        fitToView : false,
        width : '70%',
        height : '70%',
        autoSize : false,
        closeClick : false,
        openEffect : 'none',
        closeEffect : 'none',
        nextEffect : 'none', //グループ化した場合 //グループ化した場合
        prevEffect : 'none'
    });                 
});
</script>

ちなみに、

</head>

部分にこちらのcssとjqueryを読み込まないといけませんのでお忘れなく。

<link rel="stylesheet" href="../fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="../fancybox/source/jquery.fancybox.pack.js"></script>

サンプルはこちら

 

最後に、サンプルページで使用している、動画をそのまま埋め込んで、レスポンシブに対応しているのはこちらです。

 

YouTube動画の表示サイズをレスポンシブにする方法。
http://www.aiship.jp/knowhow/archives/7578

 - JQuery, サイト制作, スマートフォン, 動画

336

336

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

ECのスマホサイトは必要か?

スマホ利用者の増加 2014年は、スマートフォンの普及が急激に伸び、ニールセンの …

Adobe Creative SDK
Photoshopはもういらない?Adobe Creative SDKはすごい!

話題になっていて興味のあった Adobe Creative SDK  忙しくてい …

カート改善PC版
ECショップのカート改善ポイント(PC版)

ECショップを運営する上で、最重要項目は「売上の向上」ですが、そのためには買い物 …

スマートフォンサイトUI図鑑
スマホサイトのデザインに悩んでいる方におすすめ「スマートフォンサイトUI図鑑」

CSS&jQueryで作るスマートフォンサイトUI図鑑 スマホサイトはE …

スマホ最適化02
ECショップのカート改善ポイント(スマホ版)

ECショップを運営する上で、最重要項目は「売上の向上」であり、そのためには買い物 …