Play an Embedded YouTube Video on Click of Overlay Image in Webflow

By:
Karr Fager
Published:
May 13, 2020
Updated:
May 13, 2020
Share

I'm going to show you how to trigger a YouTube or Vimeo video to play when you click an image or animation on top of it.

My demonstration is on a Webflow website, but the javascript code should work on most any website.

Steps:

  1. Add the YouTube Embed Video
  2. Add the Overlay Image on Top of Video
  3. Add an Interaction to Hide Image on Click
  4. Add Custom Code to Trigger Start of Video

Let's get started!

First, add an "Embed" block wherever you want your video.

Paste this iFrame code into the "Embed" block:

See the Pen YouTube iFrame by Digital Red Panther (@digitalredpanther) on CodePen.

 

Adjust the video width and height as you wish.

Next, find your YouTube video, click the "Share" button underneath the video, and copy only the last part of the video URL.

youtube url code

Replace 'your-video-code-here' in the Embed block with the last part of the video URL.

Now we'll add a Div Block, make it the same width and height as the video from step 1, and make its position Absolute.

Add a background image to the Div Block and make it 'Cover'.

If you have a hover effect, you can simply replace the current background image with your hover image.

embed videos overlay

Next, we'll add a custom Pointer cursor when the Div Block is hovered over.

Give the Div Block an 'ID' of 'play-video'.

div block id

To do this, add a 'Mouse click (tap)' element interaction.

mouse click trigger

Add a Timed Animation, click the '+' button, and 'Start an Animation'.

Click the '+' at the top, click 'Hide/Show', and then hide the element.

 

custom page code in webflow

Go to the page's custom code section, and add this javascript:

See the Pen Video overlay play button by Digital Red Panther (@digitalredpanther) on CodePen.

And that's it!

About the Author:
Karr Fager
Karr is the owner and digital marketer of Digital Red Panther, providing sleek online marketing services for small business.
Share
Keep Learning About Web Design + SEO