One of the tasks in a recent Genesis Customization project that I worked on was to make a Vimeo video play inline (replacing the image) when an image is clicked. Sounds simple, but apparently is not - at least based on my brief googling. In this tutorial, we are going to place the HTML in the following format and write a small bit of custom jQuery code that will replace the image element with an iframe playing the video (in-place, not taking the visitor to vimeo.com page) when the image's anchor is clicked.
<a href="https://player.vimeo.com/video/195433452?portrait=0&autoplay=true" class="load-video-trigger" data-video-id="195433452"><img src="http://maker-pro-copy.dev/wp-content/uploads/2017/03/demo-6-1600x600.jpg" alt="Click to play video" /></a>
Step 1In this example we are going to need this functionality only on the site's homepage. As such let's create a file named say,
home.jsin child theme's
jsdirectory having this code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.