動画を背景に敷いてみました

このWebサイト、トップページちょっと改造したんです。
大した改造じゃないんですが。

トップページが少し寂しいかなぁと思いまして、背景に動画を敷いてみたので紹介します。

動画はpixabay.comからダウンロードしました。

高品質なフリー動画素材 – Pixabay
高品質なフリー動画素材。HD・4Kで利用可能。商用利用でき、クレジット表記も不要です。
https://pixabay.com/ja/videos/

動画はMP4形式の動画を使います

<video class="movieBg" src="net_image.mp4" autoplay="autoplay" loop="loop" muted="" width="300" height="150"></video>

スタイルシートのbackgroundが使えればいいんですが、残念ながら動画ファイルはbackgroundが使えないんです。
というわけでHTML5で導入されたvideoタグを使います。

で上に重ねるイメージは普通にHTMLのimgタグで記述します。

<img src="top-image.jpg" />

HTML

HTMLはこんな感じ。

<div id="mainImage">
　　<div class="img-haikei">
　　　　<video class="movieBg" src="net_image.mp4" muted autoplay loop></video>
　　</div>
　　<img src="top-image.jpg">
</div>

当たり前ですが、動画と画像が縦に二つならんでるだけ。
では、これをスタイルシートで重ね合わせます。

CSS

#mainImage {
    margin: 0 auto 20px auto;
    width: 100%;
    position: relative;
    border: none;
    padding: 0;
}

#mainImage .img-haikei {
    max-height: 800px;
    width: 100%;
}

#mainImage .img-haikei video.movieBg {
    width: 100%;
    height: auto;
    display: block;
}

#mainImage img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
}

#mainImage {
    position: relative;
}

まずここ。
動画と画像の入っている<div id=”mainImage”>にposition: relativeを指定して基準点を作ります。
『ここのdivが0(ゼロ)地点ですよーっ』て決めています。

#mainImage img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
}

で画像にはposition: absoluteを指定して重ね合わせます。

今回は<div id=”mainImage”>のど真ん中に画像を置きたいので以下のスタイルを指定します。

top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

こんな感じです。

すこしだけ賑やかになった気がします。
どうでしょう。

では。