ページ背景にYouTube動画を全画面で流すjQueryプラグインYTPlayer

かなり前の話ですが、ハイスタのDVD特設サイト見て「おっ」と思いました。

ytplayer_001

背景に動画が流れている！カッコイイ！

全ての創造は模倣から生まれるという言葉をそのまんま鵜呑みにして、とりあえず自分のサイトで真似してみました。

デモ

自分がやってるバンドのサイトです。

ytplayer_003
Dynamite Satan plus
2014年1月現在のバージョンです。もしかしたら今後リニューアルするかもしれないです。あとPC限定。

利用するプラグイン

YTPlayerというプラグインを使います。
jquery.mb.YTPlayer

ここの「DOWNLOAD IT」より。

headに書くコード

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mb.YTPlayer.js"></script>

<script>
  $(function(){
      $(".player").mb_YTPlayer();
    });
</script>

<link rel="stylesheet" href="css/YTPlayer.css">

zipを解凍したら、ディレクトリ「css」内にYTPlayer.cssが、ディレクトリ「Inc」の中にjquery.mb.YTPlayer.jsがそれぞれ入っているのでそれを適当なところにアップします。

bodyに書くコード

<body>

<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/WI18Y4Mxm-o',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">background movie</a>

～コンテンツの記述～

</body>

たしかこのaタグはどこに入れても良かったような気がします。