Streaming live at 10am (PST)

Trigger Youtube Embed


#1

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


#2

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:


#3

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.


#4

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 byYouTube custom thumbnails (Use your overlay image as thumbnail)
https://support.google.com/youtube/answer/72431?hl=en


#5

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.