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.
We shall link the videos to their respective permalinks.
Install and activate ACF.
Create a field group called say,
Video Meta having three File type fields:
Set the group to appear on Posts.
Here's the XML export file so you can easily import into your site.
Create/edit your Post(s) and upload/select the video files.
Upload jquery.visible.min.js to child theme's
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.