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.
/**
* 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];
}