勉強したことのメモ

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で連想配列を数値でソート

数字の大きい順でソートしたかったんだけど、 色々調べてhash.sort云々やっ ...

javascript_logo_unofficial-300x300
時間差をつけて処理する

setTimeout( 処理, タイムアウト時間 ); で、時間差をつけて処理が ...

jquery_logo
jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

javascript_logo_unofficial-300x300
javascriptとPHPで正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...

jquery_logo
javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

javascript_logo_unofficial-300x300
javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

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

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

javascript_logo_unofficial-300x300
他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

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

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

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

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