[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 のインラインで表示するデモ
スポンサード
コメント