Video Thumbnails with Media and YouTube or Vimeo in Drupal 7

Parent Feed: 

Today, one of the designers I work with asked me a pretty simple question about a Views-based list of videos. The listing displays thumbnails of videos being pulled from YouTube and Viemo. The question was: how do I change the size of the thumbnails?

It's easy enough to change the size of images, but the process gets fairly confusing when it comes to other content types. Here's a quick breakdown of the steps I took to enable video thumbnail resizing:

1. Create an image style.
2. Set the effect you want on the image style.
3. Create a file style.
4. Set all the presets on the file style to use the image style.

Most of the confusion here lies in the similarly named pieces we're working with -- "image styles" and "file styles" -- so let's take away the abstraction and quickly step through an example.

1. Visit admin/config/media/image-styles and create a new **Image Style**. Call it "multimedia_thumb".

2. Set the effect you want (Scale, Scale and Crop); set the size and options you want; and save the style.

3. Create a new **File Style** and call it something like "video_thumbnail".

4. For each format (Image, YouTube and Vimeo), set the Preset to use the **Image Style**: either linked_multimedia_thumb or unlinked_multimedia_thumb; then save.

5. Set the display for that field to the **File Style** wherever you need it -- in Views, on the Manage Display tab of the field in the content type, or wherever.

That should do it. To change the size of the thumbnail from here on out, just change the Image Style settings.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web