- Add a video using the video widget.
- Add an image on top of the video, making sure it covers it. You can use the Geometry tools to make sure it matches size and position.
- Add a 'play button' image.
- Paste the script choosing Before Body End tag as the placement.
- Replace #lp-pom-video-17, #lp-pom-image-18 and #lp-pom-image-19 for the IDs of your video, image and button image respectively.
- Save, republish and enjoy!
Notes: -The click on the image and button will be counted as a conversion. -You can change the image fadeout speed by changing the value in line $(".dis").fadeOut(2000); The value is in milliseconds.
<script>
//Add the IDs for the image, button image and video widget.
var videoBoxID = "#lp-pom-video-17";
var imgID = "#lp-pom-image-18";
var btnImgID = "#lp-pom-image-19";
//This will turn the mouse into a hand pointer on hover
$(imgID).add(btnImgID).css('cursor', 'pointer');
$(function() {
$(imgID).add(btnImgID).addClass("dis");
});
//This function will make the clik count as a conversion.
window.trackConversion = function() {
$('body').append('<iframe src="clkg/https/unbouncepages.com/blankpage/" style="display: none"></iframe>');
};
$(imgID).add(btnImgID).click(function(){
var vidB = videoBoxID + " " + "iframe";
$(vidB).attr('src', $(vidB).attr('src') + '&autoplay=1');
//Change the fade out speed of the images here.
$(".dis").fadeOut(2000);
trackConversion();
});
</script>