HTML CSS

RESPONSIVE BACKGROUND VIDEO

(quick & simple examples)

<body>   BACKGROUND VIDEO   <video id="vid" src="VID.MP4"     autoplay muted loop>   </video>     FOREGROUND CONTENTS   <div id="content">Hello!</div> </body>

HTML VIDEO & CONTENT

01

#vid {   FIX VIDEO IN BACKGROUND   position: fixed; top: 0; left: 0;   z-index: 1;   FIT FULL WINDOW   width: 100vw; height: 100vh;   object-fit: cover; }

CSS LAYERING - VIDEO

02

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

CSS LAYERING - CONTENT

03

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