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:
- Media (7.x-1.3)
- Media: YouTube
- Media: Vimeo
- Ctools
- Views
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.
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:
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.
4. Select “Rendered file” from the Formatter drop-down list and then select Preview from the “View mode” drop-down list.
Now if you look at the views preview, you should see resized images of the video thumbnails.
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.
3. Scroll to the bottom of the page and select a different image style from the drop-down list.
But take note of the warning message on the page:
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.
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,
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.
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.
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.
any example to generate thumbnails for custom hosted videos?
You’ll need PHP-FFMpeg, detail here: https://stackoverflow.com/a/11732732/614586
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
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.
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
I had a look in metatag and couldn’t find a specific token for thumbnails. It looks like you may have to implement a token for the thumbnails with custom code.
Look at the following link for an example:
http://drupalcode.org/project/examples.git/blob/refs/heads/7.x-1.x:/token_example/token_example.tokens.inc
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.
I’m glad you find the module useful, however, I do not maintain the Media module. I just wrote this tutorial.
If you have a feature request, I recommend you go directly to the Media module issue queue.
https://drupal.org/project/issues/media?categories=All
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.
Thanks for the followup.
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.
Look at using Lightbox2 module.
https://www.drupal.org/project/lightbox2
can we achieve same in Drupal 8?
Hi Raksha,
Use the core Media module in Drupal 8.
https://www.webwash.net/managing-media-assets-using-core-media-in-drupal-8/
Cheers,
Ivan