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.
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
In this last example, we improve on George Clooney’s Vimeo thumbnail above by generating a 200×220 face detection based thumbnail. In addition, corners are rounded, format is converted to a transparent-background PNG and saturation is reduced by 70%
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?
Working with images and texts in a web application is a complex task. In many scenarios, you want to blur a picture to make it less distracting or to make the text on top of it more readable. For example, blurring the background image of a modal window or page…