Cloudinary Blog

Generating video thumbnails from YouTube and other video sites

Generating video thumbnails from YouTube and other video sites

Websites, blogs and web applications regularly embed video content from various video service providers such as YouTube and Vimeo. Videos are usually depicted using image thumbnails, tweaked to fit the graphics design of the website. When a video thumbnail is clicked, the actual video content starts playing.
 
In this post we wanted to explain how Cloudinary can help you to easily generate thumbnails from public videos. These thumbnails can be generated while applying any required image transformation in order to match your graphic design requirements.
   
 

Generating a Thumbnail from a YouTube Video

Let’s assume that we want to display the thumbnail of the following YouTube video:
 
This can be easily accomplished by adding the video ID to the URL. 'o-urnlaJpOA' in this example:


Cloudinary retrieves this image on the fly, caches it and deliver it through a fast CDN.
 
The example above made use of Cloudinary’s URL-based API. You can also accomplish the same functionality using any one of our client libraries, for example:
 
Ruby on Rails: 
<%= cl_image_tag("o-urnlaJpOA.jpg", :type => :youtube) %>
PHP: 
<?php echo cl_image_tag("o-urnlaJpOA.jpg", array("type" => "youtube")) ?>
Django: 
{% cloudinary "o-urnlaJpOA.jpg" type="youtube" %}
Node.js: 
cloudinary.image("o-urnlaJpOA.jpg", { type: "youtube" })
 

Supported Video Providers

In addition to YouTube, you can generate, transform and deliver thumbnails of videos from Hulu, Vimeo, Animoto and DailyMotion. Simply set the type parameter to youtube, hulu, vimeo, animoto or dailymotion.
 
For example, to embed a thumbnail of the following Vimeo video: https://vimeo.com/39482584
 
Simply add the Vimeo video URL or ID:
 

 

Applying Image Transformations on Video Thumbnails

Cloudinary makes it very easy to apply a custom transformation on video thumbnails. 
 
The following example generates a 200x110 thumbnail from a YouTube video while adding the olympic games logo as a watermark in the image’s south east corner.
 
 
 
Below is another example, this time generating a 200x120 thumbnail of a different YouTube video while rotating the image by 5 degrees.
 
 
 
Here’s the same example using our client libraries:
 
Ruby on Rails: 
<%= cl_image_tag("aNwnPElsJGE", :type => :youtube, :angle => 5, 
                 :transformation => { :width => 200, :height => 120, :crop => :fill }) %>
PHP: 
<?php echo cl_image_tag("aNwnPElsJGE", array("type" => "youtube", "angle => 5", "transformation" => array("width" => 200, "height" => 120, "crop" => "fill"))) ?>
Python: 
cloudinary.utils.cloudinary_url("aNwnPElsJGE", type="youtube", angle = 5, 
                          transformation = { width: 200, height: 120, crop: "fill" } )
Node.js: 
cloudinary.image("o-urnlaJpOA.jpg", { type: "youtube", angle: 5, 
                 transformation: { width: 200, height: 120, crop: "fill" }})
In this last example, we improve on George Clooney’s Vimeo thumbnail above by generating a 200x220 face detection based thumbnail. In addition, corners are rounded, format is converted to a transparent-background PNG and saturation is reduced by 70%
 

 

Additional Notes 

If you wish, you can also pass the full URLs of the videos instead of just their IDs. The following  example delivers a thumbnail of a YouTube video based on a full video URL.
 
.../image/youtube/https://www.youtube.com/watch%3Fv=aNwnPElsJGE
 
 
Note - if the URL includes special characters like '?', they should escaped. If you use our client libraries, no escaping is required.
 

Summing it Up

Do you display video thumbnails in your website, app or blog? if so, you really need to give Cloudinary a spin. As you can see, Cloudinary makes it dead simple to generate thumbnails in any size with any effect, and deliver the resulting thumbnail from a fast CDN using smart caching.
 
Make sure you upgrade your Cloudinary client library to the latest version, try it out and tell us what you think?
 
 

Recent Blog Posts

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more