勉強したことのメモ

webプログラマが勉強したことのメモ。

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

  関連記事

クロスドメイン突破を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を用いてラン ...