Updated on April 10, 2018
This tutorial covers the details of setting up a repeater type custom field for YouTube video URLs and displaying these on the front end in a grid of thumbnails, which when clicked plays the corresponding videos in a lightbox.
We shall add a custom pagination (hidden) which is needed for the "load more" trigger to load the next set of videos.
Screencast (shows the older version of this tutorial):
- create a
Youtube Videosfield group having a
Video URLsRepeater field which inturn has a
Video URLUrl type sub field using Advanced Custom Fields Pro plugin. The field group will be set to appear on Pages that use a
YouTube GridPage Template.
- create a
YouTube Gridcustom Page Template having the code to loop through the repeater and for each row, pull the video id from the entered URL, get the video thumbnail image and title from the id, set up pagination (and hide in CSS), add load more button, load Featherlight and Infinite Scroll jQuery scripts.
- initialize Infinite Scroll.
- use CSS Grid with Float fallback for the grid and implement YouTube's code for the play button in the middle of the video thumbs.
Add the following in child theme's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.