Archived topic
Making video fill page hero container
9 replies · Started by Dan on September 13, 2021
Hey, I am trying to recreate an old theme in GP. I followed David's tutorial from here. https://docs.generatepress.com/article/page-hero-background-video/
I created the container and added the HTML snippet to it and added the CSS to the customizer. The staging site URL is in the private info. I am trying to make the video full width like the production site and have the wording and a play button that's linked to a youtube video overlay it. The video should auto-play and loop and be muted. I tried a few variations of code I found in the forum and got close but the video won't scale correctly any way I do it.
Any help with this would be appreciated.
Thanks
Dan
Hi Dan,
Can you provide a mockup image of how you want it to be laid out?
While waiting, if you have aspect ratio concerns on video scaling, you have to change this CSS:
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}to this:
video[poster] {
object-fit: cover;
width: 100%;
height: auto;
}Hey, The production site I shared in the private info is what I need it to look like. I am replicating the looks of the current old handmade theme and using Generatepress so they can update things themselves easier going forward.
I just realized I gave you the wrong URL for what I was following. It was this, https://generatepress.com/forums/topic/cover-video-cdn/
I've been messing with this all morning. I can't get the video to size itself to the container. I want the video container to have a max height of 535px. Then have the wording overlayed directly in the center of it. And it should scale to mobile.
Not sure why this is fighting me so badly on this, lol.
Thanks
Try replacing the CSS you're using to this:
.has-video-bg {
position: relative;
overflow-y: hidden;
min-height: 535px;
display: flex;
align-content: center;
justify-content: center;
}
.has-video-bg video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 0;
}
.has-video-bg .gb-inside-container {
display: flex;
flex-direction: column;
}
.video-container-content {
position: relative;
z-index: 1;
margin: auto;
color:white;
}
Here's what it'd look like - https://share.getcloudapp.com/OAunNmOd
Hey, Thanks for this! One more question, how can I get this to scale a little bit better on mobile?
https://share.getcloudapp.com/mXuKWm5p I can change the font size but it still doesn't scale like I think it should. Do I need a smaller image?
Thanks
Make a separate media rule for mobile.
try this:
@media (max-width:768px){
.has-video-bg video {
object-fit: cover;
height: 100%;
width: auto;
}
}That's perfect! Thank You so much.
No problem. Glad to be of any help. :D
