youtubeの埋め込みをポップアップ表示させる方法

2014/11/17

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のクエリを取得する２

直近で調べたのとは別に、 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を用いてラン ...

PREV: iPad等のMac製品のフレーム素材が便利なサイト
NEXT: Flash上にHTMLの文字やリンクを重ねる方法

youtubeの埋め込みをポップアップ表示させる方法

関連記事