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:

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: