Get Video Thumbnails from YouTube & Vimeo

On WordPress websites, I often add the ability for clients to add videos to their content, and while I use Advanced Custom Fields to achieve this, I don’t use the oEmbed field type. This is because often the video cards feature custom play buttons, additionally as it turns out – clients really like being able to easily control the video thumbnail image in the CMS without touching their YouTube or Vimeo account. Also, I like to play the video in a lightbox after user clicks – this allows more control over the interface & player. I am a big fan of Magnific Popup for this…

However, for clients who have a ton of videos – its not always time effective for them to spend time selecting custom image thumbs, in which case, I like to give them a fallback. Did you know you can parse the YouTube url and grab a high res video thumbnail!? Well now ya do.

ACF Field Setup

I generally like to give the client the following 4 fields:

1. Video URL: link to video hosted on YouTube or Vimeo, this field is required
2. Video Thumbnail Image: upload custom image
3. Video Title
4. Video Description


Step 1. Set Vars for Field Content

$url = get_field('video_url');

$thumb = get_field('video_thumb'); // this is an array

$title = get_field('video_title');

$desc = get_field('video_description');

Step 2. Parse Video URL

$parsedURL = parse_url($url);

Step 3. Identify Video Host

Our procedure will differ slightly based on whether the video is hosted on YouTube or Vimeo.

$host = $parsedURL['host'];

Parsed YouTube URL

Array (

    [scheme] => https

    [host] =>

    [path] => /watch

    [query] => v=123456799


Parsed Vimeo URL

Array (

    [scheme] => https

    [host] =>

    [path] => /12345678


Step 4. Check if Video is Hosted on YouTube

if (strpos($host, 'youtube') !== false) {

  // if is hosted on youtube, extract ID from the query property

  $vidQuery = $parsedURL['query'];

  // remove the 'v='

  $vidID = str_replace('v=','',$vidQuery);

  // pass ID into url 

  $defaultThumb = ''.$vidID.'/maxresdefault.jpg';


Step 5. Check if Video is Hosted on Vimeo

elseif (strpos($host, 'vimeo') !== false) {

  // if is hosted on vimeo, extract ID from the path property

  $vidQuery = $parsedURL['path'];

  // remove the backslash

  $vidID = str_replace('/','',$vidQuery);

  // all data about vimeo videos is stored in api, like so:

  $hash = simplexml_load_file("$vidID.xml");

  // grab url for large thumb

  $defaultThumb = $hash->video[0]->thumbnail_large;


Step 6. Check for custom thumbnail image

If it's set, define and set image variable.

if(!empty($thumb)) {

  $vid_img = $thumb['sizes']['medium'];


Step 7. Otherwise, set image variable to default thumbnail

elseif(!empty($defaultThumb)) {

  $vid_img = $defaultThumb;


Step 8. Output Your HTML

<div class="video-card">

  <a href="<?php echo $url; ?>" class="popup-video js-popup-video">

    <img src="<?php echo $vid_img; ?>" alt="<?php echo $title; ?>" class="img">

    <span class="video-trigger"></span>



  if(!empty($title)) { echo '<h3 class="title">' . $title . '</h3>'; }

  if(!empty($desc)) { echo '<div class="desc">' . $desc . '</div>'; } ?>

</div><!-- /video-card -->

Everything I know, I owe to Stack Overflow: