I’ve received a good question or a tutorial request from one of my readers Andrew, he asked that I do a tutorial on how to make the video placeholder image hide on click and get replaced with the video itself. This is what this tutorial is going to be about. The first thing you will need is a placeholder image, and you can use the YouTube style video play button Photoshop layer PSD file For video placeholder images I posted in the past.
Once you have the place holder image, now we just need to code it in. First I will tell you how I do it and then I will show you. Maybe it’ll be easier to grasp this way.
The image DIV has a onclick function call that will engage the function that swaps everything. It will first hide the placeholder image DIV and then insert the video embed code into the video VID and then will make this DIV visible.
You can preview how this works here.
Here is the code:
That’s it, you should now be able to make your own placeholder image swap to a video.