[jQuery]colorboxプラグインを使ってYouTubeの動画を表示する

かっこいいライトボックスを使ってYouTubeを再生させるプラグインって何かないかなーっと思ったらありました。

Colorboxっていうプラグインなんですけど、めちゃくちゃ導入が簡単です。

<link rel="stylesheet" href="colorbox.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
jQuery(function($){
  $(".youtube").colorbox({
    iframe:true,
    innerWidth:640,
    innerHeight:390
  });
});
</script>
<input type="button" href="http://www.youtube.com/embed/Ma5xXTEMBJs?rel=0&wmode=transparent&autoplay=1" value="Run" class="youtube">

jquery.colorbox-min.jsは、githubのページからDLして、colorbox.cssは、各exampleにあるcssを使えばおｋ。
この時、cssがあるディレクトリにimagesフォルダがあるので、それも使うので注意が必要です。

サンプルプログラムを読んでみると、href属性にyoutubeのリンク先を設定して、初期化すればいいみたいです。

実際に、上のプログラムを動かしたら正常終了しました。

結構、かっこいいかも。