HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Video</title> </head> <body> <div class="wrapper"> <div class="full-screen"> <div class="full-screen__body"> <div class="full-screen__title">Fullscreen video</div> <div class="full-screen__text">Lorem text</div> </div> <video autoplay muted loop preload="auto" class="full-screen__video"> <source type="video/mp4" src="https://lil-code.com/wp-content/uploads/2022/04/test-video1.webm"> <source type="video/webm" src="https://lil-code.com/wp-content/uploads/2022/04/test-video1.mp4"> </video> </div> <div class="content"> <div class="content__container"> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, possimus obcaecati, ullam impedit perspiciatis praesentium autem laudantium cumque doloribus harum nulla atque corrupti! Impedit quidem ut adipisci excepturi aliquam. Impedit. </p> </div> </div> </div> --> </body> </html>
CSS
*, *::before, *::after { padding: 0; margin: 0; border: 0; box-sizing: border-box; } a { text-decoration: none; } ul, ol, li { list-style: none; } img { vertical-align: top; } h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; } html, body { height: 100%; line-height: 1; font-size: 14px; background-color: #333; color: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } h1 { font-size: 30px; margin: 0px 0px 30px 0px; } .wrapper { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .full-screen { width:100%; position: relative; min-height: 100vh; display: flex; flex-direction: column; } .full-screen__body { padding: 50px 15px; background-color: rgba(0, 0, 0, 0.5); position: relative; z-index: 2; display: flex; flex: 1 1 auto; justify-content: center; align-items: center; flex-direction: column; text-transform: uppercase; } .full-screen__title { font-size: 50px; letter-spacing: 25px; font-weight: 700; margin: 0px 0px 20px 0px; } .full-screen__text { font-size: 18px; letter-spacing: 15px; } .full-screen__video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .content { position: relative; z-index: 5; background-color: #794f45; } .content__container { max-width: 1200px; margin: 0px auto; padding: 50px 15px; font-size: 18px; line-height: 150%; } .content__container p { margin: 0px 0px 20px 0px; }