勉強したことのメモ

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

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

   

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方法が知りたかった。

調べてみるとVideoBoxというプラグインが簡単そうだったので、ソースとサンプルをメモ。

 


 

 

■VideoBox(ダウンロード先)

http://sourceforge.net/projects/videobox-lb/files/videobox/videobox%201.1/

 


 

 

■ソース

 


 

 

■サンプル

http://sample.taitan916.info/videobox/

 


 

 

■その他

relのところでheightとweightを決められるみたい。あとdivにheight:100%をつけないとサンプルみたいにコンテンツが少ない場合は、全画面が暗転しなかった。

 - javascript

  関連記事

javascript_logo_unofficial-300x300
javascriptのtry文

javascriptとかjQueryを使ってて、Firefox,chromeはい ...

javascript_logo_unofficial-300x300
JavaScriptでAjaxを使わずにクロスドメインから変数を取得する

JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...

javascript_logo_unofficial-300x300
ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...

javascript_logo_unofficial-300x300
JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...

javascript_logo_unofficial-300x300
リンク部分にマウスオーバーでツールチップを表示(nicetitles.js)

既存のソースにて見たことの無いプラグインが 使われていたのでメモ。 ■参考 ht ...

javascript_logo_unofficial-300x300
Highstockの使い方とカスタマイズ

株価などの値動きを図表とするローソク足のグラフを何らかの方法で描写したかった。調 ...

javascript_logo_unofficial-300x300
javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

javascript_logo_unofficial-300x300
JavaScriptでURLのクエリを取得する2

直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...

javascript_logo_unofficial-300x300
JavaScriptで年齢計算

JavaScriptで年齢計算。 ■ソース function ageCalcul ...

mzl.qobqfuxq
GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...