jQueryWEBサイトの背景に動画を配置と聞くとvideoタグ使ってどうたらこうたら、未対応のブラウザのために画像をどうたらこうたらとか、フォーマットが云々とけっこう面倒なものでしたがYouTubeにアップロードした動画を背景にできるjQueryプラグインがありますので、ご紹介しようと思います。デモはこちらjquery.mb.YTPlayerのダウンロードGitHubにアクセスしてダウンロードします。ZIP]でダウンロードできます。解凍したら「jquery.mb.YTPlayer-3.0.19\dist」内の「jquery.mb.YTPlayer.min.js」を設置するサイトのディレクトリにコピーしておきます。class="player"data-property="{videoURL:'YouTube動画のURL',containment:'body',autoPlay:true,mute:true,showControls:false}"></div>上記をbody内に書きます。body内ならどこでもいいと思いますが、body直後がいいでしょう。src="js/jquery.mb.YTPlayer.js"></script><script>$(function(){$(".player").mb_YTPlayer();});</script>以上でWEBサイト全画面でYouTubeの動画の再生が可能です。//←この部分を表示したいclassやidに変更autoPlay:true,mute:true,showControls:false}"></div>以上で好きな場所にYouTube動画を埋め込めます。オプションdata-propertyに設定するオプションはGitHubを参照下さい。まとめ手軽に簡単に動画を背景にしたい場合は使えますね。ちなみにスマホには対応していません。スマホはメディアクエリで画像と入れ替えたりする工夫が必要です。関連記事[CSS,CSS3]box-sizing(border-box)でborder、paddingを気にしないスローライフな生活を送ろう!そんな大層なことですか。生活に絡んでくるようなことですか。楽になるんだからいいじゃない。背景画像を画面いっぱいに表示するよ!しかもjqueryでIE7、IE8も対応だよ!背景画像を画面いっぱいに広げるってーのはー男のマロン。栗は美味しいね下山です。パララックスとか使うと特に。ダウンロードしてきて日本語流し込むとダサイト...記事を読む[CSS]WEBだって印刷するんだ!どうでもいいけど切り取り線とか作っちゃうよ!しばらくぶりの更新。書きたいネタはたくさんありますが、そんな中から厳選して今後絶対使わないであろうネタをメモ。<hr>...記事を読む[CSS]RGBaってなんだよ!という方へ向けたメモopacity同様、透明度を指定するCSS3のプロパティ。background-colorなどとの併用で色と透明度を同時に指定できます。※オレ用に久しぶりの更新ですがな。今回はbox-shadowでよく使うものをメモっておこうと思います。ググれば似たようなものがたくさん出てきま...記事を読む[css、css3]cssで矢印を作る!コピペは卒業してちょっと解説を交えながら矢印自由自在!タイトルの通りです。矢印」とかでググると色んな矢印がコピペだけで作れてしまうけど、ちょっとカスタマイズしたいときにcssの...記事を読む[CSS3]transitionのまとメモ昨夜は会社で寝てました。「え?え?え?どこ?いつ?なんじ?」な状態です。