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. Pagination shall be added and converted to manual "load more" trigger to load the next set of videos.
- 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 if the number of rows is greater than the desired number of videos per page, load Featherlight and Infinite Scroll jQuery scripts.
- initialize Infinite Scroll with the pagination selectors, unbind the normal behaviour of infinite loading, attach a click handler for the load more button to retrieve the next set of videos and remove the load more button when there are no more to load.
- use Flexbox 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.