Add Image in Front of a Video

We include videos on splash page or landing page of some marketing websites to attract customers or explain the features of their product.

Most of the time, clients want an image to replace the fist frame of a YouTube video. To fit the video with the design of the website.

The code below will help you add an image in front of a video and hide it OnClick.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){$('#videoFrame').hide();$('#frontImg').click(function(){$('#videoFrame').show();$(this).hide();});});</script>

<div id="frontImg">
<img src="[IMAGE URL HERE]" width="477" height="331"/></div><div id="videoFrame">
<iframe width="477" height="331" src="http://www.youtube.com/v/[VIDEOID]&autoplay=1" frameborder="0" allowfullscreen></iframe></div>

Make sure that the image and the video has exactly the same dimension. And the video is set to auto play.

 

*Some links may contain affiliate links. I may get small commission from your purchases to fund this website and to avoid annoying ads.