Add Image Overlay To Embedded Video

In this tutorial, i’ll show you one method i tested which adds an image over your YouTube video.

When you click the image, it disappears and your video displays.

The path to the overlay image comes from your child themes images folder and the image file name and extension must match whats in the CSS code.
This method uses Javascript to remove the image once clicked and i’ll show you 2 ways to load the Javascript.

Before Image Clicked: Here’s the image over a Youtube video in a post.

After Image Overlay Clicked: Displays your embedded Youtube video in a post.

Simply paste the CSS near the end of your child themes style.css file before the start of your Media Queries.

The HTML simply goes in your editor, a text widget or you could integrate it into a custom function.

You will need to change the URL in the HTML to your video. The width and height values in the CSS and HTML will need to match.

There’s at least 2 ways to load the Javascript depending on which theme you’re using.

1. Genesis users can simply add the code wrapped in script tags to the Scripts box located on every Edit screen.

Here’s the code if you choose this method:

2. Another option is to enqueue the script from your child themes functions file and add the js to a file in your child themes js folder.

Comments