Video as text background
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
4 - Replace and adapt the code with your font-size/color. The height of your wrapper (the ocean image) etc.
<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>
Any ideas or Requests
Thanks
Feel free to contact us.
if you have any Hacks that would be great to add or any ideas you would like to be solved with Brizy cloud, You can write at contact@kent1media.com or use the form to upload images and ideas. Thanks a lot !!!
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want
Thanks a lot for your help, It's greatly appreciated !!
And feel free to ask for tutorials or tips that you would like to discover on the site