youtubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方法が知りたかった。
調べてみるとVideoBoxというプラグインが簡単そうだったので、ソースとサンプルをメモ。
■VideoBox(ダウンロード先)
http://sourceforge.net/projects/videobox-lb/files/videobox/videobox%201.1/
■ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <title>videoboxのテスト</title> <script type="text/javascript" src="./video/js/mootools.js"></script> <script type="text/javascript" src="./video/js/swfobject.js"></script> <script type="text/javascript" src="./video/js/videobox.js"></script> <link rel="stylesheet" href="./video/css/videobox.css" type="text/css"> </head> <body> <h1>videoboxのテスト</h1> <div style="height:100%;"> <a href="http://www.youtube.com/watch?v=Er9JOhUZ2Ek" rel="vidbox 600 450" title="youtube"> クリックでポップアップ </a> </div> </body> </html> |
■サンプル
http://sample.taitan916.info/videobox/
■その他
relのところでheightとweightを決められるみたい。あとdivにheight:100%をつけないとサンプルみたいにコンテンツが少ない場合は、全画面が暗転しなかった。
関連記事
-
-
jQueryで年月日と時間のピッカー(datetimepicker)
jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...
-
-
javascriptの注意点
javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...
-
-
leaflet.jsとosmでマップ表示及びマーカー設置
GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...
-
-
JavaScriptで文字列から数値へ変換時の注意
JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...
-
-
javascriptでのについて
javascriptを書く際に、 <script> <!-- ...
-
-
迷惑メール対策でフォームにreCAPTCHAを導入する方法
スパムメール対策として問い合わせフォームにreCAPTCHAを導入したいという件 ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
グラフ表示ライブラリのamChartsがよさそう
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
無料でジオコーディング(住所→経度緯度)を行う
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
-
-
javascriptで画像を取り扱う際の注意
javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...