Submitted on Jul 23, 2016

Introduction and Requirements

When you upload a video to Drupal from YouTube or Vimeo, an automatically generated thumbnail will be created. This is normally not a big deal, but wouldn't it be nice if you could have complete control over the thumbnail that is associated with the video? Thankfully, with Drupal's File Entity module, you can. In this tutorial, we will add the ability to add a custom video thumbnail to a video in Drupal. As an added bonus, we will use the ImageCache Actions module to automatically add a play button to each video thumbnail.

The above image shows how Drupal automatically generates a thumbnail for videos uploaded from YouTube or Vimeo

The above image shows how we can create a custom thumbnail for a video uploaded from YouTube or Vimeo

Enable Necessary Modules

Add a Video Thumbnail Field to the Video File Type

  1. Add a new video thumbnail field to the Video File Type
  1. Configure the field using the following settings:
Label Machine Name Field Type Widget


Image Media browser

  • Required field = enabled
  • Enabled browser plugins = Upload, Library
  • Allowed file types = Image
  • Allowed URI schemes = Public files
  • Number of values = 1

Add a New View Mode for the Video File Type

  1. Add a new entity view mode for the video file type
  • Label = Video Thumbnail
  • Use custom display settings = enabled
  • Enable this view mode for the following types =  Video

  1. Update the display mode for the new view mode you just created
Thumbnail <Hidden> Image Image style: Medium (220x220)

  1. Finally, update the view mode of the video field.
Video <Hidden> Rendered file View mode: Video Thumbnail

Add a Custom Thumbnail to an Existing Video

  1. Navigate to an existing video
  1. Upload a custom file to be used as the video thumbnail

Automatically Add Play Button to the Custom Video Thumbnail (Optional)

  1. Create a new image style

  1. Add a scale effect and set it to 220x220

  1. Add a Overlay (watermark) effect and set it to the following:
  • X offset = center
  • Y offset = center
  • opacity = 100%
  • file name = path to your custom file

  1. Update the video file type display to use the new Video Thumbnail image style

The above image shows how we can create a custom thumbnail that automatically adds a play button for a video uploaded from YouTube or Vimeo