用途
新着
履歴
分類


HTML 背景に動画を流す

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

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

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

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

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

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

  • メニュー1
  • メニュー2
  • メニュー3

HTMLはこちら

<div class="demo_wrap">
    <div class="demo_space">
    <p>背景に動画を使うサンプル</p>
    <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</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倍早くなるので、もっと気軽に動画が扱えるようになります。

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

公開 : 2020-04-05 23:38:44
更新 : 2020-04-06 00:03:11
このエントリーをはてなブックマークに追加
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2020 kipure
Top