勉強したことのメモ

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の文末

下記みたいなコードがあって、文末に「;」が 無いのになんで動くのこれ? となった ...

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の値を ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...