HTML 背景に動画を流す

HTMLとCSSでコンテンツの背景に動画を再生するサンプルです。

動画
HTML

最近インターネット回線も早くなり、動画を背景にするサイトも増えてきました。

自分の場合、だいたい4Gで調子が良くて1秒間50MBくらいな体感なので、つまりは50MBまでの動画なら1秒待てば、表示できるということになります。

でも、サイトにはいろんな素材が含まれるので動画に全てを注力できないので5MBくらいなら我慢できるでしょう。

以下はサイズ：2MB、大きさ：950x540、長さ：11秒の動画を背景に敷いています。

背景に動画を使うサンプル

メニュー１
メニュー２
メニュー３

HTMLはこちら

<div class="demo_wrap">
    <div class="demo_space">
    <p>背景に動画を使うサンプル</p>
    <ul>
        <li>メニュー１</li>
        <li>メニュー２</li>
        <li>メニュー３</li>
    </ul>
    </div>
    <video src="/movie/demo/sea/001.mp4" autoplay loop muted>
        <img src="/movie/demo/sea/001.png" alt="海の写真">
    </video>
</div>

CSSはこちら

.demo_wrap {
    position: relative;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.demo_wrap p,
.demo_wrap ul{
    margin:0;
    padding:0;
    list-style: none;
}
.demo_wrap video, 
.demo_wrap img {
    width:100%;
}
.demo_wrap .demo_space {
    color: #fff;
    font-size: 20px;
    position: absolute;
    z-index: 1;
    margin:0;
    padding-top:0px;
}
.demo_wrap .demo_space ul{
    text-align: right;
    font-size:16px;
    padding: 0 20px 0 0;
}

5Gが主流になれば100倍早くなるので、もっと気軽に動画が扱えるようになります。

また画像の圧縮も進化しますし、軽くしつつアレンジを加える加工のテクニックもあるので専門の人に聞くことも考えて置いたほうがよさそうです。