jQueryプラグイン「Colorbox」でYouTubeをライトボックス表示にしてみよう!

2014/11/01

こんにちは。
今回はjQueryプラグイン「Colorbox」でYouTubeをライトボックス表示にしてみようです。

一般的には画像に使う事が多いライトボックス表示ですが、jQueryプラグインで簡単にできるようになった事もあり、画像だけでなく動画やhtml等もライトボックス表示する事が多くなりましたね。その中で今回はYouTubeをライトボックス表示をしてみましょう。

 

まずはダウンロードしてみよう!

下記のリンクをクリックして、Colorboxのサイトに行き、Downloadのボタンをクリックし、ダウンロードします。

Colorbox – a jQuery lightbox

colorbox

http://www.jacklmoore.com/colorbox/

 

設置してみよう!

先ほど、ダウンロードしたファイルを設置していきます。
まずはダウンロードしたファイル(colorbox-master)のexample1〜example5の好きなデザインのcolorbox.cssとimagesを同じ階層に設置します。
colorbox.cssをhead内に読み込みます。

 

jQuery本体とjquery.colorbox-min.jsを/bodyの手前に読み込みます。

 

その下に下記の記述をします。
innerWidthは幅のサイズ、innerHeightは高さのサイズを記述します。

 

html部分は下記のように記述します。

 

デモは下記をクリックして下さい。
YouTubeのボタンをクリックするとライトボックス表示します。

DEMO

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

というふうに簡単に設置する事ができます。
以上でjQueryプラグイン「Colorbox」でYouTubeをライトボックス表示にしてみようでした。

topへ戻る