前回のvideo タグでmp4 動画をサイトに埋め込むの方法で、videoタグでmp4動画を埋め込む方法を紹介させていただきましたが、今回は埋め込んだ動画をColorboxのインラインで表示（再生）させるカスタマイズのご紹介です。
Colorbox のダウンロード
以下のページからColorboxのファイル一式をダウンロードします。Colorbox – a jQuery lightbox
Colorbox の設置
画像や動画、iframeもLightbox風に立ち上げる jQueryプラグイン「Colorbox」 の記事でも基本的な使い方を紹介させていただいておりますが、jQueryファイルと一緒にjquery.colorbox.jsとcolorbox.cssのファイルをhead内に設置します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<link rel="stylesheet" type="text/css" href="./colorbox/colorbox.css" /> <script src="./jquery.js" ></script> <script src="./colorbox/jquery.colorbox.js"></script><script> $(document).ready(function(){ $(".inline").colorbox({inline:true}); $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script> |
HTML側の記述例
動画のサムネイル画像を用意した上で、再生させたい場所に以下のような記述を行います。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!--サムネイル--> <a class='inline' href="#inline_content"> <img src="thumbnail.jpg"> </a> <!--インライン--> <div style='display:none'> <div id='inline_content'> <video wwidth="640" height="480" controls preload> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogg" type="video/ogg"> <source src="sample.webm" type="video/webm"> <p>ご利用のブラウザはvideo タグによる動画の再生に対応していません。</p> </video> </div> </div> |
以下にColorboxを使った動画再生デモを設置しました。
video タグで埋め込んだmp4 動画をColorbox のインラインで表示するデモ
コメント