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の文末
下記みたいなコードがあって、文末に｢;｣が 無いのになんで動くのこれ？ となった ...
-
-
IE&javascriptの予約語
前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語？ っ ...
-
-
JavaScriptでAjaxを使わずにクロスドメインから変数を取得する
JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...
-
-
jQueryで偶数or奇数行にclassを付与
やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...
-
-
複数のajax処理の結果をまとめて表示
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
JavaScriptでUNIXタイムスタンプ取得
UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...
-
-
HTML、javascriptソースの暗号化
サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...
-
-
leaflet.jsとosmでマップ表示及びマーカー設置
GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...
-
-
クロスドメインのiframeで子フレームから親フレームにheightの値を渡す
やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...
-
-
テキストエリアを自動でリサイズ
改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...