This members-only tutorial provides the steps to display a responsive grid of YouTube video thumbnails with the titles and URLs taken from a Advanced Custom Fields' Repeater field in Oxygen. Clicking on a thumbnail will load the corresponding YouTube video in a lightbox with the option to navigate to previous and next video in the gallery.
If you do not want the lightbox functionality, follow this tutorial instead.
When a thumbnail is clicked, lightbox opens up
and the video starts playing.
Lightbox can be closed by clicking the x at the top right corner or by pressing Esc.
Users can go to previous and next videos by clicking the left and right arrows.
Let's create a Page titled say, "Our Videos".
Install and activate ACF Pro.
Go to Custom Fields > Tools.
Edit your Page and add as many videos you want to show.
Install and activate My Custom Functionality plugin.
Connect to your hosting account using a FTP client and navigate to site's
Upload glightbox.min.css to the plugin's
Upload glightbox.min.js to the plugin's
plugin.php and add the following inside the
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.