Archived topic
GenerateBlock Container Video Mobile
9 replies · Started by Mike on September 28, 2021
Hello,
I'm trying to add a video background to a container. I've used the code that David has shared in a previous thread - https://generatepress.com/forums/topic/generateblock-container-video/#post-1358852
It works on desktop, but the video doesn't appear on mobile. Any suggestions on how to fix this?
Thanks,
Mike
Hi there,
I'm actually not seeing a video on desktop or mobile.
When I visit the video source link wp-content/uploads/2021/09/IMG_0104.mp4, there is only sound.
Thanks Leo,
That's strange because on desktop the video is working for me, and when I visit the source link as well.
Do you think there may be an issue with the video file instead of the code?
Hi Mike,
The video doesn't work for me as well, there's only sound.
Can you check the video link in incognito mode?
Let us know :)
Thanks! You guys are right of course haha. It was an issue with the video itself. I uploaded it again and it seems to be working now.
If I could ask you a couple other questions about the container video that would be great.
How do I overlay text and a button on top of the video? And how do I place an overlay on top the video to make it darker so the text will be more legible?
Thank you! Appreciate your help.
Hi there,
you can add whatever content you like to the Container Block that has the video-container class, this content will sit in front of the video. You should also be able to set a background color to the Container block to create the overlay.
If you want to try that and let us know if you get stuck and we can take a look.
Appreciate it David!
I added the text and button blocks and it's sitting in front of the video, but the buttons aren't "clickable" even though they have links. The buttons and text are also a bit transparent, how do I make those completely opaque?
Thank you
Try adding this CSS:
.video-container .gb-inside-container > *:not(video) {
z-index: 1;
position: relative;
}
Works perfectly. I really appreciate all the help! Thank you
Glad to be of help!