Hello,
my goal is to lay text over a video, so I started with adding the video as background, however, it wont show the video itself,
What I’m doing wrong here?
(I took my video link out, but even with video this is the only thing what it will show)
Hey Bianca,
Thanks for writing in! Please make sure that you are using the *.mp4 format. Using other formats, the browser may not display as it is not cross browser compatible. We would be happy to double check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Best Regards.
Thank you, you solved the issue, its in m4v I will convert to the correct format.
We’re glad it’s resolved now.
Cheers!
Sadly it was not the fix.
I will add a secure note that maybe someone can have a look. I really need the option to lay a text over a video.
Any help much appreciated
The problem is on the main page, section 9
Hello @Eyasulana,
I suspect this could be a bug. I have already reported the issue, and it has been logged in our issue tracker for the development team’s further investigation. At this time, there is no estimated timeframe for a fix. I kindly ask you to stay tuned for upcoming updates, where this may be addressed.
I have added a DIV element in Section 9 for you, which contains a Raw Content element where I placed the custom HTML to achieve the text-over-video effect on your server. The entire section is currently set to hidden, but you can unhide it anytime to review or adjust the settings.
To change the text or the video, simply edit the Raw Content element within that DIV—this is where the current text and video are set.
<div class="video-background-container">
<video autoplay muted loop playsinline>
<source src="https://your_domain_name/wp-content/uploads/2023/09/Blue-Ethos-Trailer-New.mp4" type="video/mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div class="color-overlay"></div>
<div class="overlay-text">
Your text goes here
</div>
</div>
/* Container fills viewport width and height */
$el .video-background-container {
position: relative;
width: 100vw;
height: 100vh; /* full viewport height, adjust as needed */
overflow: hidden;
}
/* Video fills the container, covers area, centered */
$el .video-background-container video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100vw;
min-height: 100vh;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 1;
}
/* Full size overlay with semi-transparent color */
$el .color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(172, 47, 47, 0.5); /* black overlay with 50% opacity */
z-index: 2;
}
/* Centered text with higher z-index */
$el .overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 3rem;
font-weight: bold;
text-align: center;
z-index: 3;
padding: 0 1rem; /* optional padding on smaller screens */
text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
/* Optional: Responsive font size */
@media (max-width: 600px) {
$el .overlay-text {
font-size: 1.8rem;
}
}
Thank you for your patience and understanding
Ahhh okay I understand. And thank you for this solution. I cna work with that for now.
One more question how can I set a max height for the video but still have it fill it 100% with
Thank you
**I think I figured it out myself 
Hello @Eyasulana,
You can set the max height for the video by using the custom CSS code, which was added to the DIV element–>customize -->Element CSS
$el .video-background-container {
position: relative;
width: 100vw;
max-height: 600px;
overflow: hidden;
}
$el .video-background-container video {
width: 100%;
max-height: 600px;
object-fit: cover;
display: block;
}
The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding, you can subscribe to One, where customization questions are answered.
Hope it helps.
Thanks
