<div class="container">
<video class="bg-video" autoplay loop>
<!-- <source src="https://i.imgur.com/uOXPQwu.mp4" type="video/mp4" /> -->
<source src="https://imgur.com/2cSaKIt.mp4" type="video/mp4" />
</video>
<p class="text">AWESOME TEXT</p>
</div>
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
}
.container > .bg-video {
width: 100%;
height: 100%;
}
.container > .text {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background-color: #000;
color: #fff;
font-weight: 900;
font-size: 80px;
font-family: sans-serif;
mix-blend-mode: multiply;
user-select: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.