Customize a Video Thumbnail in Drupal

Posted on July 23, 2016 - 5 Minute Read

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.

1 1 3

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

1 2 2

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 by going to /admin/structure/file-types/manage/video/fields
  2. Configure the field using the following settings:
Label Machine Name Field Type Widget
Thumbnail field_thumbnail Image Media browser
  • Required field = enabled
  • Enabled browser plugins = Upload, Library
  • Allowed file types = Image
  • Allowed URI schemes = Public files
  • Number of values = 1

2 2 1

2 3 1

Add a New View Mode for the Video File Type

  1. Add a new entity view mode for the video file type by going to /admin/config/system/entity-view-modes/add/file
  2. Label = Video Thumbnail
  3. Use custom display settings = enabled
  4. Enable this view mode for the following types = Video

3 1 1

  1. Update the display mode for the new view mode you just created

    /admin/structure/file-types/manage/video/display/video_thumbnail

FIELD LABEL FORMAT
Thumbnail <Hidden> Image Image style: Medium (220x220)

3 2 1

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

3 3 0

Add a Custom Thumbnail to an Existing Video

  1. Navigate to an existing video by going to /admin/content/file
  2. Upload a custom file to be used as the video thumbnail

4 2 0

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

  1. Create a new image style by going to /admin/config/media/image-styles/add

5 1

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

5 2

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

5 3

  1. Update the video file type display to use the new Video Thumbnail image style by going to /admin/structure/file-types/manage/video/display/video_thumbnail

5 4

5 5

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

Categorized In:Tagged In: