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

Code

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] => www.youtube.com

    [path] => /watch

    [query] => v=123456799

)

Parsed Vimeo URL



Array (

    [scheme] => https

    [host] => vimeo.com

    [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 = 'https://img.youtube.com/vi/'.$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("https://vimeo.com/api/v2/video/$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>

  </a>


  <?php 

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

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


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