CSSで背景動画

自分用メモです

参考サイト
CSSだけで実装可能！画面いっぱいに動画背景を表示する方法

参考サイトではmuted属性について触れていなかったので追加。
これがないとChromeで再生されませんでした。

HTML

<div class="section">
 <video id="bg-video" src="file/sample.mp4" poster="poster.jpg" autoplay loop muted></video>
 <div class="wrap">
　　コンテンツが入ります
 </div>
</div>

.sectionで背景にグレーのオーバーレイ、
#bg-videoで背景に動画を再生、
.wrap内でコンテンツを表示しています。

CSS

# section{
  background: rgba(0, 0, 0, 0.6);
}
# section #bg-video{
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 background: url('poster.jpg') no-repeat;
 background-size: cover;
}

videoタグの属性

属性	内容
controls	操作パネルの表示
muted	無音で再生
autoplay	自動再生
loop	繰り返し再生
poster	動画が表示できない場合や、再生する準備が整うまでの間に表示される画像を指定
playsinline	iOSでvideoタグをインライン再生（iOS10から）