Background video in link block

I’m creating a portfolio website, and I’m trying to have a video background in a link block, instead of a static image, on the “3D & Motion” page. On the other pages, (“illustration” & “design”), I’ve used a link block with a background image on “cover”, and have a text wrapper with a hover interaction on top of it so that the background darkens and text appears when hovered over. I’m basically trying to have the same thing, except with a video that autoplays and autoloops; I’ve tried just using a GIF but the quality is too low.

I’m trying to nest the Background-Video element in the link block, but the video just doesn’t appear. Not sure if I’m doing something wrong, or if there’s some other workaround.

Thanks!

Read-only link: https://preview.webflow.com/preview/joycxu?preview=6a48f5cbf0887eec28c538693328330f

Published link: http://joycxu.webflow.io

Hi Joy, I looked but where is the background video again? I couldn’t find anything.

On the 3D & Motion page, its nested under Section > Thumbnail Block (the first one, with class “Reel”) > Main Background Video.

Thanks!

1 Like

Hi @joycxu,

I would suggest changing your element position from Auto to Relative:
16 PM

When I completed this step while inspecting the code - I was able to see the background video.

Hopefully this helps :nerd_face:

Best regards,
Micah

Joy,

Like Micah said, take the link block to Relative, but give the video 100% on both H & W. Give the Text Wrapper a z-index or else it won’t show on hover. You may need to adjust the opacity since the video is a strong fuschia. Yep take the text wrapper solid color to 75%.

Great, looks like it’s working!

Thanks so much!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.