Sunday, 19 April 2015

Display Thumbnail Image From Embedded Youtube Video Link

  
    Once i was working on a website with Youtube embedded videos and i decided rather than actually rendering the video extract a thumbnail image to enhance the page load time, so i thought i should share it to help others.

Applicable Scenario : 

    Why would you want to download a thumbnail image from a Youtube video? Well, you might want to show it as a feature image for your posts or fro archive purpose or might be for numerous other reasons.

   Suppose you have a website where you are displaying numerous Youtube embedded videos, but in this case if you directly render the videos while loading this page, the page load time will increase tremendously so loading images instead of videos will drop down the page load time comparatively and hence improve the performance of your website.

What you need :

You just need to have the Youtube Video ID from your embedded Youtube video link.
 

Youtube Video :

Display Thumbnail Image From Embedded Youtube Video Link

An embedded Youtube video.



Extracted Image :

Display Thumbnail Image From Embedded Youtube Video Link

An image extracted from the above video.


I have used following pretty straightforward PHP script to get the screen shot from a Youtube embedded video URL.

<?php

$video = "Your youtube embedded video link";

if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $video, $match)) {
    $image = $match[1];
}

?>

<img height="170px;" src="http://img.youtube.com/vi/<?php echo $image; ?>/0.jpg" />

Please leave your comment if you have any queries.