勉強したことのメモ

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でAjaxを使わずにクロスドメインから変数を取得する

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

javascript_logo_unofficial-300x300
JavaScriptで小数の計算(decimal.js)

JavaScriptで小数の計算をすると値がずれることがあった。調べてみるとJa ...

javascript_logo_unofficial-300x300
javascriptのtry文

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

javascript_logo_unofficial-300x300
サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

jquery_logo
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

javascript_logo_unofficial-300x300
javascriptの文末

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

javascript_logo_unofficial-300x300
javascriptでのについて

javascriptを書く際に、 <script> <!-- ...

mzl.qobqfuxq
GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

javascript_logo_unofficial-300x300
JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を 行っているものがあり、使いそうなので ...

javascript_logo_unofficial-300x300
JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...