Vimeo Videos Grid using ACF Repeater in Oxygen

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.

Live Demo

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: