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

2014/11/01

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

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

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

colorbox

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

[html] [/html]

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

[html]

[/html]

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

[javascript]

[/javascript]

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

[html]

YouTube

[/html]

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

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