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 (without the Lightbox functionality), 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:

/**
 * Grab the url of a publicly embeddable video hosted on vimeo
 * @param  str $video_url The "embed" url of a video
 * @param  str $detail 	  Video data to be fetched
 * @return str            The url of the thumbnail, or false if there's an error
 */
function get_vimeo_thumbnail_url( $vimeo_url ) {
	if( !$vimeo_url ) return false;

	$data = json_decode( file_get_contents( 'https://vimeo.com/api/oembed.json?url=' . $vimeo_url ) );
	
	if( !$data ) return false;
	
	return $data->thumbnail_url_with_play_button;
}

Set the snippet to run everywhere. Save changes and activate.

Step 5

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload glightbox.min.css to the plugin's assets/css directory.

Upload glightbox.min.js to the plugin's assets/js directory.

Edit plugin.php and add the following inside the custom_enqueue_files() function:

if ( is_page( 'our-videos' ) ) {
    wp_enqueue_style( 'glightbox', plugin_dir_url( __FILE__ ) . 'assets/css/glightbox.min.css' );

    wp_enqueue_script( 'glightbox', plugin_dir_url( __FILE__ ) . 'assets/js/glightbox.min.js', '', '2.0.5', true );
}

Replace is_page( 'our-videos' ) depending on where you have the Vimeo video grid showing.

Step 6

Edit the Page with Oxygen.

Add a Section and inside that a Code Block.

Advanced > Size & Spacing > Width: 100%.

PHP & HTML:

This is a premium members-only content.

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

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: