Updated on March 02, 2021
This members-only tutorial provides the steps to display a grid of Vimeo video thumbnails (fetched using Vimeo's oEmbed API) with the titles and URLs taken from a Advanced Custom Fields' Repeater field in Oxygen.
Backend:
Frontend:
We shall use GLightbox so that clicking on a thumbnail will autoplay that video in a lightbox with left and right arrows to go to previous and next videos.
Note: For a similar tutorial but for videos from YouTube, go here.
Step 1
Let's create a Page titled say, "Our Videos".
Step 2
Install and activate ACF Pro.
Go to Custom Fields > Tools.
Import this (mirror) field group.
Step 3
Edit your Page and add as many videos you want to show.
Step 4
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Get thumbnail URL using Vimeo oEmbed API
Code:
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.