[JS]video タグの埋め込み動画をColorbox を使って再生する方法
スポンサード
jQuery ファイルと一緒に jquery.colorbox.js と colorbox.css のファイルを 内に設置します。
以下にColorbox を使った動画再生デモを設置しました。
video タグで埋め込んだmp4 動画をColorbox のインラインで表示するデモ
スポンサード
前回の video タグでmp4 動画をサイトに埋め込む の方法で、video タグでmp4 動画を埋め込む方法を紹介させていただきましたが、今回は埋め込んだ動画をColorbox のインラインで表示(再生)させるカスタマイズのご紹介です。
目次
Colorbox のダウンロード
以下のページからColorbox のファイル一式をダウンロードします。Colorbox の設置
画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」 の記事でも基本的な使い方を紹介させていただいておりますが、jQuery ファイルと一緒に jquery.colorbox.js と colorbox.css のファイルを 内に設置します。
<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 側の記述例
動画のサムネイル画像を用意した上で、再生させたい場所に以下のような記述を行います。<!--サムネイル--> <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 のインラインで表示するデモ
スポンサード
コメント