Cloudinary Blog

Generating video thumbnails from YouTube and other video sites

Nadav Soferman
By Nadav Soferman
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 YouTube Video Thumbnail

Let’s assume that we want to display a YouTube video thumbnail of the following 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.
 
page load speed
 
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: 
Copy to clipboard 
<%= cl_image_tag("o-urnlaJpOA.jpg", :type => :youtube) %>
PHP: 
Copy to clipboard 
<?php echo cl_image_tag("o-urnlaJpOA.jpg", array("type" => "youtube")) ?>
Django: 
Copy to clipboard 
{% cloudinary "o-urnlaJpOA.jpg" type="youtube" %}
Node.js: 
Copy to clipboard 
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 YouTube Video Thumbnails

Cloudinary makes it very easy to apply a custom transformation on YouTube 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: 
Copy to clipboard 
<%= cl_image_tag("aNwnPElsJGE", :type => :youtube, :angle => 5, 
                 :transformation => { :width => 200, :height => 120, :crop => :fill }) %>
PHP: 
Copy to clipboard 
<?php echo cl_image_tag("aNwnPElsJGE", array("type" => "youtube", "angle => 5", "transformation" => array("width" => 200, "height" => 120, "crop" => "fill"))) ?>
Python: 
Copy to clipboard 
cloudinary.utils.cloudinary_url("aNwnPElsJGE", type="youtube", angle = 5, 
                          transformation = { width: 200, height: 120, crop: "fill" } )
Node.js: 
Copy to clipboard 
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

Laravel File Upload to a Local Server Or to the Cloud

Prosper Otemuyiwa
By Prosper Otemuyiwa
Laravel File Upload to a Local Server Or to the Cloud

Currently, Laravel is the most renowned PHP framework, boasting of a large developer community; several open-source packages, such as Cashier, Sanctum, Scout, and Telescope; and a host of paid platforms, e.g., Laravel Forge, Envoyer, and Vapor. Laravel Forge & Envoyer ably supports deployment and use of Laravel production-based apps.

Read more

TedsVintageArt.com Automates Generation of Captivating Product Images on Cloudinary

By TedsVintageArt.com
TedsVintageArt.com Automates Generation of Captivating Product Images on Cloudinary

At TedsVintageArt.com, we digitally restore historic maps and sell their art prints on multiple platforms, such as Amazon, Etsy, eBay, and Houzz. As our operations ramped up years ago, it took an inordinately long time to generate custom images for our products. Plus, since we sell art, it behooves us to produce multiple high-quality images for each print, which was another time-consuming task.

Read more

lastminute.com Takes a Vacation From Media-Management Headaches With Cloudinary

Alok Shah
By Alok Shah
lastminute.com Takes a Vacation From Media-Management Headaches With Cloudinary

As a 20-year online leader in travel and leisure retail, Europe-based public company lastminute.com along with its 1,200 employees are committed to enriching the lives of vacationers through comprehensive and enticing products and services. Beyond flight deals and tours, it's the images and videos, whether of that luxury villa in Greece, romantic Parisian street, or exotic stroll through the Marrakech markets, that attract audiences and boost bookings.

Read more