背景が動画で全画面のページの作り方 サンプルコード
最近ちらほら見かけますね。背景が動画で、モニターの全部に広がっているやつです。
今年はこれがはやるのでは、と言われています。
ちょいちょいいろんなサイトを拝見しながら、私なりにわかりやすいサンプルコードを作りましたので、載せておきます。
Firefox, Chrome, IE11で大丈夫です。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>背景が動画で全画面のサンプルサイト</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'> <style> div.dotpattern { width:100%; height:100%; background-image:url(images/dot.gif); position:fixed; top:0; left:0; z-index:2; } video#sample-video { position:absolute; left: 0; top: 0; z-index:1; } .message { position:absolute; left:200px; top:100px; color:white; z-index:3; font-size:72px; font-family: 'Oxygen', sans-serif; font-weight:bold; } .message_small { position:absolute; left:200px; top:200px; color:white; z-index:3; font-size:14px; font-family: 'Oxygen', sans-serif; } </style> <script> $(function(){ var h = screen.height * 1.1; $("video#sample-video").attr("height", h); }); </script> </head> <body> <div class="dotpattern"></div> <video id="sample-video" autoplay> <source src='sea.ogv' type='video/ogg; codecs="theora, vorbis"'> <source src='sea.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p> </video> <div class="message"> Nice sea shore! </div> <div class="message_small"> They are very funny and dangerous guys.<br /> So one of them is buried.<br /> </div> </body> </html>
実物のページはこちら。
もっとましなサンプル動画はなかったのか！というつっこみもありそうですね。。。
http://onlineconsultant.tv/test/movie_bg_test/
ちなみに、私がはまったポイントは、HTMLでもCSSでもなかったです。
動画の上下に黒い帯が入ってしまっていたんですが、Any Video Converter Ultimateというソフトでmp4やoggの形式にコンバートする時に、縦横比がおかしかったので、その分黒い帯が入ってしまっていたんですね。