HTML CSS

RESPONSIVE FULL PAGE BACKGROUND VIDEO

BACKGROUND VIDEO <video id="myVid" src="VID.MP4"              autoplay muted loop> </video>

THE HTML

01

FOREGROUND CONTENTS <div id="myContent">   Hello World! </div>

#myVid {   FIXED BEHIND   z-index: 1;   position: fixed;  top: 0; left: 0;   FIT FULL WINDOW   width: 100vw; height: 100vh;   object-fit: cover; }

VIDEO CSS

02

#myContent {   LAYER CONTENTS IN FRONT   z-index: 2;   position: absolute;  top: 0; left: 0;   FILL FULL WIDTH   width: 100vw;  }

CONTENT CSS

03

REMOVE DEFAULT PAGE SPACING html, body {   margin: 0; padding: 0; border: 0; }

PAGE CSS

04