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
