Trigger Youtube Embed

Hi,

I’m trying to play an embedded youtube video with an overlay image in front of it.
I can click through the overlay so that the video plays but what I want is for the overlay to then fade.
I hope that makes sense. Has anyone got any ideas?
The video is on section-3.

https://preview.webflow.com/preview/citycoast-church?utm_source=citycoast-church&preview=6b2a1cf9291df65da8c8e95415d26187

http://citycoast-church.webflow.io/

Thanks,

Dan

By interaction. On click hide my-overlay (on click change display to display: none; - not opacity zero).

TUTURIAL

first select object than

or by regular JS:

Thanks for your response. Unfortunately, that hasn’t solved the problem.
I’m getting the video to play behind the overlay (which I want) but the overlay wont hide to reveal the video.
Does anyone have any thoughts?

Much appreciated.

By Youtube API

Without Youtube API (by iframe) - its harder to solve this (Search on stakoverflow). Change autoplay=1 not work on chrome (Chrome block autoplay videos with sound. Example).

By the way - you could solve this by YouTube custom thumbnails (Use your overlay image as thumbnail)

Thanks for your help. Youtube does work but it has the big red play button which doesn’t fit with my site. I solved it by using Vimeo. Thanks again.

This works with YouTube as well: Play a YouTube Embed With Click of Overlay Image (Webflow) - YouTube