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 1
In 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.js in child theme's js directory having this code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
When I used this code on the Digital Pro theme, the Vimeo Video generated was very small.
Can you provide the URL?
Hi, I was able to get it to work. Thanks for the response.