Skip to content

Instantly share code, notes, and snippets.

@victorzen
Last active October 23, 2017 15:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save victorzen/21716cf207dbba45244261da05fc9821 to your computer and use it in GitHub Desktop.
Image place holder for embedded video
  1. Add a video using the video widget.
  2. 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.
  3. Add a 'play button' image.
  4. Paste the script choosing Before Body End tag as the placement.
  5. 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.
  6. 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment