Lazy Loading Vimeo Videos on a CPT Archive in Oxygen

This premium members-only tutorial provides the steps to use Velocity to display video thumbnails which when clicked plays Vimeo videos thereby enabling you to lazy load the videos for a better page speed in Oxygen.

We shall register a movie Custom Post Type, add a video_id custom field to this CPT, enter the video IDs and set up the Template for the CPT archive to output the shortcodes in the format needed for Velocity to lazy load the videos.

Step 1

Register your CPT using either CPT UI or otherwise.

Set Has Archive to True.

Step 2

Install and activate ACF.

Create a field group having a Text type of field for entering the video ID.

Set the group to appear on your CPT.

Step 3

Create/edit your CPT entries and populate the Video ID custom field for each.

Step 4

Let us create a custom function using which we can obtain the URL of video's thumbnail from its ID.

Install and activate Code Snippets.

Go to Snippets > Add New.

Title: [Function] Get video data from Vimeo ID

Code:

/**
* Grab the specified data like Thumbnail URL of a publicly embeddable video hosted on Vimeo.
*
* @param  str $video_id The ID of a Vimeo video.
* @param  str $data 	  Video data to be fetched
* @return str            The specified data
*/
function get_vimeo_data_from_id( $video_id, $data ) {
$request = wp_remote_get( 'https://vimeo.com/api/oembed.json?url=https://vimeo.com/' . $video_id );
$response = wp_remote_retrieve_body( $request );
$video_array = json_decode( $response, true );
return $video_array[$data];
}

Save changes and activate.

Step 5

Install and activate Velocity.

Step 6

Create and edit the Oxygen Template that applies to your CPT archive.

Add a Section and inside that Easy Posts.

Template PHP: