Display Video Thumbnails With Media Module

/ By / 3 minutes of reading / 18 Comments

The Media module is great for managing media files such as images and videos on a Drupal website. Today I will discuss video handling, specifically how to display a video thumbnail.

In this tutorial, you’ll learn how to display a thumbnail for videos that are hosted on YouTube and Vimeo. Then, we’ll look at how to change the video “preview” view mode.

Getting Started

Before we begin, download and install the following modules:

If you use Drush, run the following command:

$ drush dl media media_youtube media_vimeo ctools views

Step 1: Create Video Field

First we’ll create a field called “field_video” on the Article content type that’ll reference our YouTube or Vimeo video.

1. Go to Structure -> “Content types” and click on “manage fields” within the Article row.

2. Create a video field using the values defined in Table 1.0.

Table 1-0. Create video field

Option Value
Label Video
Machine name field_video
Field type File
Widget Media file selector

3. On the video field edit page: check the Video checkbox within the “Allowed remote media types” list and check both “vimeo:// (Vimeo videos)” and “youtube:// (YouTube videos)” within the “Allowed URI schemes” list.

Fig 1.0

Once you have checked the right checkboxes click on Save settings.

At this point, we have a video field on the Article content type. Now we need to create some test content, for this tutorial I used the following two videos:

Fig 1.1

Step 2: Create Views Page

Now we’re ready to create our views listing page. At this point, we have a video field and some test content. The only work left for us to do, is create a listing page that will display the “Preview” view mode of the video.

1. Go to Structure -> Views and click on “Add new view”.

2. Fill out the “Add new view” form using the values defined in Table 1.1 and click on “Continue & edit”.

Table 1-1. Create a new view

Option Value
View name Recent videos
Machine name recent_videos
Show Content of type Article sorted by Newest first
Create a page Checked
Page title Recent videos
Path recent-videos
Display format Unformatted list of fields

3. Click on Add within the Fields field-set and select the Video field.

Fig 1.2

4. Select “Rendered file” from the Formatter drop-down list and then select Preview from the “View mode” drop-down list.

Fig 1.3

Now if you look at the views preview, you should see resized images of the video thumbnails.

Fig 1.4

Step 3: Customize Video Preview

The section above, shows you how easy it is to display a video thumbnail. All we did is configure views to display the preview view mode and Media module did the rest.

But what if you want to change the size of the thumbnail? Luckily Media module makes it easy to change everything within a view mode.

1. Go to Configuration -> “File types” and click on “manage file display” within the Video row.

2. Click on Preview in the top right corner.

Fig 1.5

3. Scroll to the bottom of the page and select a different image style from the drop-down list.

Fig 1.6

But take note of the warning message on the page:

Fig 1.7

If you’re planning on making drastic changes to the preview display, I recommend you create a separate view mode for your custom preview. To define a custom view mode, look at the Entity view modes or Display Suite module.

If you have any questions, please leave a comment.

About The Author

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

Related Posts

18 thoughts on “Display Video Thumbnails With Media Module”

  1. ibrahim

    hi, thanks for tutorial. i want to ask a question about thumnail. we can get thumnail with Media: YouTube,
    Media: Vimeo modules. and we can get it with media internet sources module too. i have a system and i don’t use any module for drupal, vimeo or dailymotion. i just give url id and provider type it show the video. but i have a problem which i upload video image manuel. so i think to take video thumnail with function and assaign it field_video_image if there is no uploaded image for video. i will use the functions in http://forrst.com/posts/Grab_Youtube_Vimeo_Embed_Thumbnail_PHP_Functio-rTL and assaign image field_video_image so i don’t write css settings again. and i use template.process.inc for node–video.tpl.php. i could not succeed this. when try above link’s page function there is an error about assign (because i only reference the image, i must take the tumbnail to local). so after i think, i can make this with using internet sources module. but my teaser image is responsive and internet sources module is not. so i must take the tumbnail with this module and i must assign it to my field_video_image.

    summarize, i just take tumbnail image (large size) with above function or using module (internet resources or video_youtube or file field with remote file field) and assaign it field_video_image

    could you say about something about this. i will very helpful. i have been trying to solve this problem for a week.

    thanks,

    Reply
    1. ivan

      Sorry I never done anything like this, you’ll have to look around the available hooks and see where’s the best place to grad the thumbnails.

      Reply
  2. Kedar Joshi

    Hi,

    I have created a view where I am showing certain videos on my page. I have used the ‘Video’ module which is a part of Drupal 7 core.
    However, with this module, I am only able to list the links to all videos and not the thumbnails like you have showed. How can I get the thumbnails for videos?
    I am not using Youtube videos, I have my own videos having extensions like flv, mp4, avi etc.

    Reply
    1. ivan

      The reason why we have Youtube thumbnails is because Youtube offer the thumbnails via their API.

      For custom hosted videos you’ll need to generate your own thumbnails. Thumbnails don’t magically appear, they’ll have to be generated during the transcoding or uploading phase.

      Reply
  3. govind

    Hi,

    I have Done What You have Mentioned In above All Steps But I am Not Getting Any Thumbnail Of You Tube Video. I am Getting Only Link Of You Tube Video What Should I do.

    Please Give Reply

    Reply
    1. ivan

      Did you configure Views to display the preview view mode? This is important, the thumbnail will only appear on the preview view mode.

      Also, check the “Recent log messages” (admin/reports/dblog) page and see if you’re getting any PHP errors.

      Reply
  4. Didier

    help please, I am creating a social video site, and using tokens for Open Graph (meta tag) i need thumbnail image URLs in module media_youtube

    Reply
  5. Didier

    thanks for your work,The module works super well. However I ran into a little glitch when I was completing the SEO Open Graph tags. There is only a token for the video Youtube field but no option for the thumbnail video. This would be extremely helpful and I am sure a well asked for feature.

    Reply
  6. Remaye

    Following the issue I posted a few time ago, you would probably advice me to post to the Media issue queue and you would be right !
    Just to finally give the solution, there was in my case 2 problems :
    – serveur configuration pb : php_flag “allow_url_fopen” must be On – https://drupal.org/node/1388106#comment-5905994
    – permissions pb : public://styles/vignette-liste-realisations/public/ should be publically writable (! couldn’t it be a security pb ?) – https://drupal.org/node/1388106#comment-7102062

    Thanks for the tuto again.

    Reply
  7. Omzo

    Hi every one!
    is it possible to show only a link in which, when a user click it, the video will play through a modal window?
    if yes, hoe can I do it?
    Many thx for this great tutorial.

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top