Published on Jan 29, 2020

Vimeo Videos Grid using ACF Repeater in Oxygen

Sridhar Katakam

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.

Screenshot showing when the video is paused

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-ocalendar-check-omagnifiercrossmenuchevron-downarrow-right