1 - First add a Background image to your section
2 - Then add an embed element with this code
This is the text that will serve as a mask for the video
<div class="wrapper">
<video class="clipped-video" muted loop autoplay>
<source src="https://image.k1m.fr/file/pexels-rachel-claire-7666608.mp4"></source>
</video>
<svg height="100%" width="100%">
<clipPath id="text-overlay" width="100%" height="100%">
<text x="0" y="0" dy="1.58em">SEA</text>
</clipPath>
</svg>
</div>
3 - Then add this custom CSS code to your embed element's custom CSS setting
<style type="text/css">
.wrapper {
background:#000;
}
.wrapper {
position: relative;
width: 100%;
height: 60vh;
margin: 0 auto;
}
video {
width: 100%;
height: auto;
}
.clipped-video {
-webkit-clip-path: url(#text-overlay);
clip-path: url(#text-overlay);
}
text {
font-family: sans-serif;
font-weight: 900;
font-size: 12rem;
}
</style>
Thanks
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want