Helpful resources
            
           
              Need more help?
             
             
              Check out the Webflow community.
             
            
              Free Webflow templates
             
             
              The best free Webflow templates.
             
            
              Hire a Webflow expert
             
             
              Partner with a certified expert.
             
            Is there a way to mask a video underneath text in Webflow and change the background color from white to a different color behind the text without showing the video?
             Published on
            
            
             September 22, 2023
            
           Yes, there is a way to mask a video underneath text in Webflow and change the background color from white to a different color behind the text without showing the video.
To achieve this, you can follow the steps below:
- Add a div block to your page and give it a class name.
 - Inside the div block, add a text element and your desired text content.
 - In the style panel, set the position of the div block to relative.
 - Add a video element inside the div block and choose your desired video source.
 - In the style panel, set the position of the video element to absolute and adjust its size to fit the div block.
 - Next, select the div block and go to the settings panel.
 - Under the background section, set the background color to your desired color.
 - Scroll down to the overflow section and set it to hidden. This will hide any content that overflows from the div block.
 - Lastly, place the text element on top of the video element by adjusting its position using the style panel. You can use the z-index property to control the stacking order of the elements.
 
By following these steps, you will be able to mask a video underneath text in Webflow and change the background color behind the text. This technique is useful for creating engaging and visually appealing designs on your website.
Example code:
<div class="video-container">  <h1>Text Overlay</h1>  <video src="your-video-source.mp4"></video></div>
           CSS Styles:
.video-container {  position: relative;  background-color: #000;  overflow: hidden;}video {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: auto;  object-fit: cover;  z-index: -1;}h1 {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  color: #fff;  font-size: 2rem;}
           Additional queries that users may search for:
- How to create a text overlay on a video in Webflow?
 - Can I change the background color of a video in Webflow?
 - Is it possible to hide a video behind text in Webflow?