Trying to place a div behind div that will be responsive

Hi,

Webflow noob here.

I am wanting to place a picture on top of a div with a background video. So that when I hover over the picture, the video is revealed.

My issue is, how do I get the video to be responsive so that it always stays hidden behind the picture? Right now, when I change the different mobile sizes, the video will start creeping out and being visible.

Any help would be great!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

What if you set the layout display of the video to ā€œnoneā€, then when you hover over the image, it gets set to ā€œnoneā€ and the video gets set to ā€œblockā€?

Iā€™m pretty new at this, but in my mind that seems like a logical solution.

So I know how to get the image to disappear. But the problem I am having is when I place my video behind the image, it doesnā€™t hide behind that image on all mobile devices.

Iā€™m wanting to build something like whatā€™s on the homepage of this site: https://elevationchurch.org/

Hi @travisclark,

  1. So you want a static photo on top. Then when that photo is clicked/hovered over, a video shows over the photo??

  2. Also, a background video wonā€™t auto play on mobile anyway, latest web standards. I would suggest an overlay over the video, not a photo. A simple overlay with a play icon on top. This gives the user a clear idea of what to do.

  3. Itā€™s a good practice to allow users to choose their interactions, and this way would work for all devices.

If you want I can do a short video of the process, itā€™s not that complicated once you watch it. Let me know. :slight_smile:

Thanks for the response, Gary!

  1. Correct. Iā€™m looking to do what this site did on their homepage: https://elevationchurch.org/

  2. I actually found a way to get BG videos to play on mobile. I can trace back that article if youā€™d like.

  3. Totally makes sense and I would agree if the purpose of the video was to be watched. But since this video is more of a short clip that makes the photo ā€œcome to lifeā€ in a way, thatā€™s why Iā€™m wanting to have the autoplay functionality.

You sound like you have a lot of experience though. Would you know how to properly get the video behind the photo and have it be responsive with that photo?

Hi,
Okay, let me look at your read-only link and see the best way. Oh I see, the video you have is 1280 x 720. Okay Iā€™m uploading a short videoā€¦ give me a sec:

1 Like

Thanks so much, Gary. I really appreciate your help on this.

Hey you just deleted the video I was recording itā€¦ haā€¦ sorry it will only take a minuteā€¦

Okay sorry, had a call, but this should explain it:
https://www.screencast.com/t/fSAfXQFX

Oh no! Iā€™m so sorry! Iā€™ll stop messing with it so you can do your thing. I just put it back.

This is amazing. Thanks so mcuh for taking the time to do that. I really appreciate it!

Not a problemā€¦ glad to helpā€¦ see ya later :slight_smile:
And remember try to use photos at or around 3000 x 3000 whenever possible, it helps to make sure it covers any section/div used. Just optimize before uploading the asset. Have Fun!!

Did the walk through and it looks much better.

Only question is how do I get the picture and video smaller and in the center as right now itā€™s going edge-to-edge?

:grin: ā€¦ donā€™t put any CSS Display on the Body, usually only typography :slight_smile:

Also, remember this is a visual CSS panel, when you add any ā€œBLUEā€ setting, youā€™re adding CSS Styles to your style sheet behind the scenes. Always, always, always try to ā€˜minimizeā€™ as many BLUE settings as possible. It bloats the style sheet unnecessarily.

Remove all those outer margins. I really try to eliminate as many margins as possible, because it is the most destructive. It makes things over lap vertically which is against the normal document flow. Opt for inner padding when you can.

A few best practices to incorporate. See ya!