Cloudinary Blog

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: http://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.
 
 
 
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

Introducing Website Speed Test: An Image Analysis Tool Integrated with WebPagetest

Because images dominate page weight, methodical image optimization can have a significant effect on conversions and user experience. And the performance tools you choose to use can have a powerful impact on how websites are built and maintained. One such popular open source tool is WebPagetest. It is designed to measure and analyze webpage performance, which is why Cloudinary chose to partner with our friends over there to launch Website Speed Test.

Read more

You might have read some tutorials or articles explaining the importance of images and how to optimize them to deliver a great experience to your users. But does this work really translate into wins for your company? In this talk, you see real-world examples of the positive impact that image optimizations can have on metrics that your bosses and clients care about. You will walk away from this talk with compelling data and useful tools to help you get buy-in and support for this important user experience work at your company.

Read more
Don’t let your digital assets become a liability!

Everyone is a content producer today - from the largest publishing house and entertainment studio, down to the smallest ecommerce store, corporate website or personal blog.

If content is the lifeblood of your website or application, images and videos form the heart that makes it tick and creates an emotional connection with the audience. But, using images and videos to make the content visually engaging and meet your conversion goals, you face a new challenge: managing your digital assets. Because the images and videos are created by different teams for different channels - such as website, social media, ecommerce store, blogs, partners and digital agencies to name a few - chaos can ensue.

Read more

Image Optimization in Python

By Prosper Otemuyiwa
Image Optimization in Python

Approximately 62 percent of today’s internet traffic is made up of images. Media-rich websites must ensure that all images are optimized to speed up the site. A faster site will make your visitors happy; and when they are happy you will likely see increased conversion rates.

Read more