Trigger Youtube Embed


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.



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


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 byYouTube 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: