A CSS3 video mask snippet allows you to apply a shape or image as a mask over your video element, effectively "cutting out" portions of the video to reveal only the areas defined by the mask. This creates a visually interesting and dynamic effect, adding a layer of creativity to your video presentation
HTML Code
<div class="container">
<div class="vid-mask">
<video autoplay="" muted="" playsinline="" loop="" src="Your_video_link" ></video>
</div>
</div>
CSS Code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.vid-mask {
-webkit-mask-image:url('https://www.wavypoint.com/assets/files/2024-05-31/1717184735-81069-00.png');
-webkit-mask-position:center center;
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:cover;
mask-image:url('https://www.wavypoint.com/assets/files/2024-05-31/1717184735-81069-00.png');
mask-position:center center;
mask-repeat:no-repeat;
mask-size:cover;
}
