Webサイト作成 TIPS
背景が動画で全画面のページの作り方 サンプルコード
最近ちらほら見かけますね。背景が動画で、モニターの全部に広がっているやつです。
例）
http://www.theqcamera.com/
今年はこれがはやるのでは、と言われています。
ちょいちょいいろんなサイトを拝見しながら、私なりにわかりやすいサンプルコードを作りましたので、載せておきます。
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の形式にコンバートする時に、縦横比がおかしかったので、その分黒い帯が入ってしまっていたんですね。
