Does anyone know if https://www.relume.io/components/header-106 in webflow can be configured to start with a still image initially on the placeholder, but then convert to a looping video on hover? (if so, whether this can apply to other image centric components generally too) Thanks.
Andonis S. yeah I don't see why this wouldn't be possible but it really has nothing to do with this specific component. How I would probably look at doing this is by creating a wrapper (position relative), have the image and the video layered in using absolute position, and then use interactions to swap the image for the video using show/hide. Where things get tricky is that you'd likely want to have the video be a background video. So you'll need some custom JS to hit play on that background video on hover. Unless its just a looping video and you don't care where its starting. Another assumption I'm making is the performance is not much of an issue for you. if it is, then I would highly recommend not doing this - or you'll want to include in your custom JS to load the video on hover as well, which has its own set of challenges. I'm assuming that the still image is not an actual frame or still from the video itself. If it was say the first frame of the video, then you'd just be simply playing the background video on hover, which is a lot more straight forward to do than what I'm describing above. Here's a youtube video by Timothy Ricks on background videos in Webflow that will help pull this off: https://www.youtube.com/watch?v=m-OQTr0akKc After you have this wrapper, then you'd just drop it into Header 106 and hope for the best. My guess is that you'd run into some layering/z-index issues and some tweaks will need to be made there. I would say, start with the basics that I've just laid out above, using ChatGPT or similar for the custom JS, and then feel free to reach out with specific questions you might have - be sure to share the read-only/sandbox link for Webflow so I can see how things are built.
