背景に動画を敷くWebページを勘で作った

ちょっと以前の話だけど、背景に動画を使うページを作った。こういうやつ。

このページは今年の夏に出した同人誌のティザーサイトなんだけど、今も404ページから見られる。

最近のウェブデザインの流行りで、ファーストビューに画像ではなく動画が表示されるサイトがある。そのなかでも、背景に動画を使うページがあって、それを真似して作ってみた。あまりこの類のページは作らないので知見があまりないんだけど、勘でやったらなんとなくできた。

以下のコードは上記ページを簡略化したもの。

HTML

<body>
  <video preload autoplay muted loop class="background-video">
    <source src="/video/video.mp4">
    <source src="/video/video.ogv">
  </video>
  <div class="wrapper">
    <h1>テキスト</h1>
    <p>Lorem Ipsum</p>
  </div>
</body>

CSS

.background-video {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

.wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 1;
}

構造的に、bodyのbackground-imageに動画を指定したいのだけど、どうやらそれはできなさそうなので、videoタグを全画面に敷いて、上からコンテンツ部分をかぶせる、という方法にした。min-width: 100%;とmin-height: 100%;を指定してるのがゴリ押し感がある。

動画は、mp4だけだとfirefoxで表示されないので、ogvも用意した。動画は一眼を三脚に固定して撮った。ほかのサイトの事例みてると、ボケが豊かな動画のほうがそれっぽい雰囲気が出るようです。今回はマクロレンズで撮った。

ところで、背景として動画使うなら、gifアニメのように自動再生することが前提なんだけど、videoタグにautoplay属性をつけると実現できる。しかしながら、iOSなどではこの自動再生が無効になってしまい使えない。そこで、やや強引ではあるがbodyに代替画像を出すことでなんとかした。

@media (max-width: 480px) {
    body {
        background: #000 url('../images/bg.jpg') no-repeat center;
        background-size: cover;
        background-attachment: fixed;
    }
    .background-video {
        display: none;
    }
}

ただ、スマホで見たら動かないの悲しいから、もっとうまいことできるかもしれない。代替のgifアニメ出すとか。

Older Post