全画面表示のモノクロ動画をバックグラウンドに表示

<div id="video-container">
    <div id="video-area">
	    <video id="video" poster="images/damy001.png" webkit-playsinline playsinline muted autoplay loop>
    		<!--
				poster：動画ファイルが利用できない環境で代替表示される画像
				webkit-playsinline：iOS 9までのSafari用インライン再生指定
				playsinline：iOS 10以降のSafari用インライン再生指定
				muted：音声をミュートさせる
				autoplay：動画を自動再生させる
				loop：動画をループさせる
				controls：コントロールバーを表示する
    		-->
		    <source src="video/movie01.mp4" type="video/mp4">
			<p>動画を再生できる環境はありません。</p>
	    </video>
    </div><!--/video-area-->
    <div id="text-area">
        <!--
			動画の上にテキストなどを表示するエリア
    	-->
    </div><!--/text-area-->
</div><!--/video-container-->

#video-container{
	position:relative;
    width: 100vw;
    height: 100vh;/*高さを全画面にあわせる*/
	display: grid;
	align-items: center;
	align-content: center;
	overflow: hidden;
} 
#video-area{
    position: absolute;
    z-index: -3;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}
#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100vh;
    min-width: 100vw;
    filter:grayscale(100%);
}
#text-area{
	z-index:3;
}