youtubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方法が知りたかった。
調べてみるとVideoBoxというプラグインが簡単そうだったので、ソースとサンプルをメモ。
■VideoBox(ダウンロード先)
http://sourceforge.net/projects/videobox-lb/files/videobox/videobox%201.1/
■ソース
<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%をつけないとサンプルみたいにコンテンツが少ない場合は、全画面が暗転しなかった。
関連記事
-
-
クロスドメイン突破をjavascriptで行う
ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
JavaScriptでdisplay:none/blockの切り替え
jQueryだとhide/show使うか、もしくは toggleだけでいいけどJ ...
-
-
JavaScriptでURLのクエリを取得する2
直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...
-
-
JavaScriptの三項演算子
いつもと違う書き方? 使い方の三項演算子が あったのでメモ。 ■ソース var ...
-
-
JavaScriptで数値のカウントアップ及びカウントダウン
JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...
-
-
jQueryやJavaScriptで認識違いしていたところのメモ(高速化)
認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...
-
-
JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す
やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...