- This topic has 9 replies, 2 voices, and was last updated 2 years, 7 months ago by Elvin.
-
AuthorPosts
-
September 13, 2021 at 8:09 pm #1929584Dan
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
DanSeptember 13, 2021 at 10:23 pm #1929668ElvinStaffCustomer SupportHi 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; }
September 14, 2021 at 4:22 am #1929955DanHey, 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.
September 14, 2021 at 4:58 am #1929988DanI just realized I gave you the wrong URL for what I was following. It was this, https://generatepress.com/forums/topic/cover-video-cdn/
September 14, 2021 at 8:36 am #1930374DanI’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.
ThanksSeptember 14, 2021 at 7:30 pm #1930800ElvinStaffCustomer SupportTry 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
September 16, 2021 at 6:20 am #1932507DanHey, 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?
ThanksSeptember 16, 2021 at 9:15 pm #1933288ElvinStaffCustomer SupportMake a separate media rule for mobile.
try this:
@media (max-width:768px){ .has-video-bg video { object-fit: cover; height: 100%; width: auto; } }
September 17, 2021 at 7:30 am #1933670DanThat’s perfect! Thank You so much.
September 18, 2021 at 10:22 am #1934896ElvinStaffCustomer SupportNo problem. Glad to be of any help. 😀
-
AuthorPosts
- You must be logged in to reply to this topic.