[YouTube、jQuery]WEBサイトの背景にYouTubeの動画を配置するjQueryプラグイン[jquery.mb.YTPlayer]

WEBサイトの背景に動画を配置と聞くとvideoタグ使ってどうたらこうたら、未対応のブラウザのために画像をどうたらこうたらとか、フォーマットが云々とけっこう面倒なものでしたがYouTubeにアップロードした動画を背景にできるjQueryプラグインがありますので、ご紹介しようと思います。

デモはこちら

jquery.mb.YTPlayerのダウンロード

GitHubにアクセスしてダウンロードします。

※ダウンロードは緑色のボタン[Code]→[Download ZIP]でダウンロードできます。

解凍したら「jquery.mb.YTPlayer-master/dist」内の「jquery.mb.YTPlayer.min.js」を設置するサイトのディレクトリにコピーしておきます。

html

<div id="bgndVideo" class="player"
data-property="{
    videoURL:'YouTube動画のURL',
    containment:'body',
    autoPlay:true,
    mute:true,
    showControls:false
}"
></div>

上記をbody内に書きます。

js

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mb.YTPlayer.js"></script>
<script>
$(function(){
    $(".player").mb_YTPlayer();
});
</script>

以上でWEBサイト全画面でYouTubeの動画の再生が可能です。

YouTube動画を表示する場所を自由に決める

全画面はいいとしてYouTube動画を表示する場所を「このdivの中」など自由に配置するには・・・

<div id="bgndVideo" class="player"
data-property="{
    videoURL:'YouTube動画のURL',
    containment:'.movie',　//←この部分を表示したいclassやidに変更
    autoPlay:true,
    mute:true,
    showControls:false
}"
></div>

以上で好きな場所にYouTube動画を埋め込めます。

オプション

data-propertyに設定するオプションはGitHubを参照下さい。

まとめ

手軽に簡単に動画を背景にしたい場合は使えますね。
ちなみにスマホには対応していません。
スマホはメディアクエリで画像と入れ替えたりする工夫が必要です。