Sridhar Katakam

Genesis and WordPress Tutorials

How to auto play videos as they come into view in Genesis

by 2 Comments

This tutorial provides the steps to:

  • add custom fields to upload/select mp4, webm and ogv video files for Posts using Advanced Custom Fields.
  • replace content archive images with muted looping videos (if set) for each post appearing on the archives on the front end using shortcode built in WordPress.
  • use jQuery Visible to a) play the videos that are in the viewport on page load and b) to play each video as the user scrolls to it i.e., if/when any portion of the video appears in the viewport and to pause the video when it goes out of the viewport.

in Genesis.

We shall link the videos to their respective permalinks.

Step 1

Install and activate ACF.

Create a field group called say, Video Meta having three File type fields:

  • mp4
  • webm
  • ogv

Set the group to appear on Posts.

Here's the XML export file so you can easily import into your site.

Step 2

Create/edit your Post(s) and upload/select the video files.

Step 3

Upload jquery.visible.min.js to child theme's js directory.

Create a file named say, video-inview.js in the same location having this code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • I do not see this step.
    replace content archive images with muted looping videos (if set) for each post appearing on the archives on the front end using shortcode built in WordPress.

    There are no instructions for any shortcode.

    Reply

    • You don’t have to add any shortcodes manually in the WP editor. We are doing it in Step 4 here:

      echo do_shortcode( '[video mp4="' . $mp4 . '" ogv="' . $ogv . '" webm="' . $webm . '" loop="on" width="300" height="169"]' );

      This line was not visible earlier as WordPress was trying to parse it here in the blog post. I’ve just updated it. Hope it is clear now.

      Reply
    • >