Click Image to Play Embedded Vimeo Video

Hey Webflow!

I’m new to webflow from squarespace and I’m struggling with what I thought was a pretty common webpage functionality:

I have a portfolio site with a lot of videos of my work. All the vimeo the player controls are unsightly for something that should be clean.

Like in squarespace, I’d like to have an image (thumbnail with play image) that when clicked hides the image and displays the embedded vimeo player in its place, now playing from that initial click.

Using interactions I’m able to hide the image and display the embedded video, but I can’t get the embedded video player to play off that initial interaction click.

(As is, requires second click on the embedded video)

Nothing’s worked in altering the embed code. Adding autoplay=1 after video id hasn’t helped. It only works as autoplay=1&muted=1, which defeats the purpose by adding a new click to unmute.

Anyway around that? Or a different way I could approach for the same result?

Here’s my Test Link
Here’s my Read Only Link

Something else I’ve noticed:

When it’s set as “?autoplay=1&muted=1” it’s silently playing while hidden until I interact by mouse click to hide the image and display the embedded video.

Is there a way to get the video to autoplay when I interact with image and not before? I would need that for viewer experience, and it seems like it would solve the issue of browser preventing the autoplay.

Hello @mcdufrechou, welcome to the community. So to achieve what you want you kind of have two options. One could be to just use Webflow’s native Lightbox component. But if you want to work with what you already have this tutorial will show you how to achieve it with some custom code https://www.youtube.com/watch?v=rs6nNKJhxK4 I hope this helps!

Thanks, Pablo!

You wouldn’t happen to know the code he refers to in his video or another place I could reference do you?

He skips over it in the tutorial, says he’ll link to an article with it in the description, but that link no longer works.

Close yet so far!

yes you can find all the steps and the code in his article here Play a YouTube Video on Click of Overlay Image (Webflow) I hope this helps!