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:
- Create an image style.
- Set the effect you want on the image style.
- Create a file style.
- 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.
Visit admin/config/media/image-styles and create a new Image Style. Call it "multimedia_thumb".
Set the effect you want (Scale, Scale and Crop); set the size and options you want; and save the style.
Create a new File Style and call it something like "video_thumbnail".
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.
![]()
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.