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 ($37/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
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: