YouTube Videos Grid in Genesis using ACF Pro’s Repeater, Infinite Scroll and Featherlight

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.

Screenshot:

Screencast (shows the older version of this tutorial):

We shall

• create a Youtube Videos field group having a Video URLs Repeater field which inturn has a Video URL Url type sub field using Advanced Custom Fields Pro plugin. The field group will be set to appear on Pages that use a YouTube Grid Page Template.
• create a YouTube Grid custom 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.

Step 1

Add the following in child theme's functions.php: