のためのアーカイブ 2015年2月26日

動画を見る

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