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.
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.
So you want a static photo on top. Then when that photo is clicked/hovered over, a video shows over the photo??
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.
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.
I actually found a way to get BG videos to play on mobile. I can trace back that article if youād like.
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:
Not a problemā¦ glad to helpā¦ see ya later
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!!
ā¦ donāt put any CSS Display on the Body, usually only typography
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.