動画を背景で再生させるとサイトがダイナミックになりますよね♪ 例えば下記のようなサイトを見ていただければ分かりますがウィンドウいっぱに動画が再生されていて、街の風景だったり職場の風景だったりが再生されていますが、躍動感ありますよね。
では、このサイトのように背景に動画を再生させるにはどうしたらいいのか？て事なんですが、html5からvideoタグが使えるようになったのでvideoタグの使い方を説明してみようかと思います。
まぁもちろん、背景に動画を再生されるjQueryなどのプラグインはありますが、なにぶん自分で設定できないものか・・・ということで調べたらhtml5のvideoタグとCSSを利用して背景に動画を再生させることができるようなのでメモ。
html5のvideoタグに関しては、以前記事にしたので、そちらをどうぞ。
HTML要素の記述
html要素ですが、html5のvideoタグを使用して動画を配置します。
その際に、videoタグに「autoplay」、「loop」、「muted」、「poster」を指定しておく。
そうすることで自動的に繰り返し再生されるのと音を消しておくことでユーザーに配慮する。
また、動画が見れない環境の場合に表示させるposter属性も指定しておく。
動画の上に表示させるコンテンツ
CSS要素の記述
動画を背景に設置するには
まず、IE対策として、videoタグに「display:block;」にしておきますｗ 相変わらずIEってクソですね～
CSSの設定では、「position:fixed;」と「z-index」でマイナスの値を指定してあげると、コンテンツの背景に動画をしくことが出来る
video#bg_movie {
display:block;
position: fixed; left: 0;
top: 0;
min-width:100%;
min-height:100%;
z-index:-100;
}
div#contents{
width:100%;
background-color:#fff;
text-align:center;
padding:30px;
opacity:0.7;
}
横幅と高さを画面いっぱいに広げるには
ウィンドウを広げたり狭めたりすることもあると思いますが、その際に動画のサイズ以上に幅・高さを広げると変なスペースができてしましますが、それをさせないために、「min-width:100%;」と「min-height:100%;」を指定してあげると横幅・高さがウィンドウに合わせて広がったりします。
例えば、「min-width:100%;」だけ指定するとウィンドウに合わせて横幅が縮小しますが、高さは動画の比率によって変化するのでウィンドウの高さに合わず、下にスペースが出来てしまいます。
といった感じで、そんな複雑な設定はないんですが、動画を使うとなるとスマートフォンでは画像に切り替えるなどして対処するなど、したほうが良いかもですね～!
