【HTML】Chrome で背景に動画(MP4)を表示

WEB上の背景に動画を表示する場合です。

１．HTML

 <!-- 動画背景 -->

   <div class="wrap">

   <link rel="stylesheet" type="text/css" href="bbb.css">

    <!-- 背景用の動画ファイル -->

    <video id="bg-video" src="video/home-top.mp4" poster="" width=100  height=50  right=400 bottom=10 autoplay loop muted></video>

   <!-- 背景の上に表示させたいコンテンツ -->

    <div class="header-title">

    <p>

       TEST  SAFETY!!

    </p>

    </div>

   </div>

<video id="bg-video" src="video/home-top.mp4" poster="" width=100  height=50 

 right=400 bottom=10 autoplay loop muted></video>

 

・mp4のTYPEは「ｈ264/AVC」にします。

・muted を追加します。

・動画の大きさ　width=100  height=50 で指示します。

・動画の位置　 right=400 bottom=10 で指示します。

BBS.CCSファイルの内容

CCSファイルの最後の行に追加します。

/* ----- 背景用 ----- */

#bg-video{

 position: fixed;

 right:  400;

 bottom: 20;

 min-width: 50%;

 min-height: 50%;

 width: 480;

 height: 400;

 z-index: -100;

 background: url('poster.jpg') no-repeat;

 background-size: cover;

}

/* ----- 背景の上に表示 ---- */

.header-title{

 position: relative; /*必要*/

 z-index: 2; /*必要*/

 display: flex;

 width: 50%;

 justify-content: center;

 align-items: center;

 text-align:center;

 margin: auto;

}

以上