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?
