Video Embed Field defines a custom field type that allows you to display videos from YouTube or Vimeo. Not only can you embed videos; but you can also display video thumbnails.
The module also allows you to define video styles, just think of a video style as a video player. This means you can define a video style which is 640px wide on the article page, and then on the homepage define another style which is 320px wide.
We’ll look at how to implement custom video styles in our second part “How to Manage Video Styles using Video Embed Field Module in Drupal 7“.
If you want to integrate other video platforms, then look at the video_embed_field.api.php file on how to implement the required hooks.
Finally, it’s important to note, videos entered using this module are not “proper” files. This means they won’t be added to the file_managed table or treated as files. If this is an issue, then you’ll have to use the Media module or something else.
In this tutorial, we’ll use Video Embed Field so that we can attach videos to the Article content type. Then, we’ll use Views to create a “Recent articles” block view where you’ll learn how to display video thumbnails.
If you’re having problems using this module on a site that is HTTPS, then check out this issue in the project issue queue.
Getting Started
Before we can begin, go download and install Video Embed Field, Ctools and Views.
If you use Drush, run the following commands:
$ drush dl video_embed_field ctools views
$ drush en video_embed_field ctools views
Add Video Field to Content Type
The first step is to attach a video field to the article content type. When an editor needs to embed a video to an article, they will simply copy and paste the URL into this field.
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 | Video Embed |
| Widget | Video |
3. Leave the field settings as default and click on “Save settings”.
4. Now go to Content, “Add content” and Article.
Fill out the form and enter in a YouTube video into the video field.
Once the form is saved, you’ll see an embedded YouTube player.
Now that we’ve setup the field and it’s working, let’s create a views listing block that will display the most recent articles and video thumbnails.
Display Video Thumbnail using Views
As mentioned earlier, one of the biggest benefits to using this module is the ability to display a video thumbnail. In this section, we’ll create a block using Views that will list the recent articles and display a thumbnail for each article.
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 articles |
| Machine name | recent_articles |
| Show | Content of type Article sorted by Newest first |
| Create a page | Unchecked |
| Create a block | Checked |
3. Click on the Add link in the Fields section, select “Content: Video” and click on Apply.
4. Select “Thumbnail Preview” from the Formatter drop-down list, and then select a specific image style and where the thumbnail should link to.
Now if you view the block in the preview area, you’ll see a video thumbnail below the title.
Finally, change the field order so that the title is below the thumbnail.
Now we need to go to the Blocks page and add the view block to a region. So go to Structure, Blocks and add the view into a specific region.
Once you configure the block, go to the homepage and you should see the block in the specified region.
That’s it for the first part of our introduction to Video Embed Field. Just remember if you’re looking for a simple and straightforward solution for displaying videos, then take a serious look at this module.
In part two, we’ll look at how to implement custom video styles.
If you have any questions, please leave a comment.
Video Embed Field is really useful. You can make the embedded videos responsive (scale to the size of your browser/device) with the Fitvids module:
https://drupal.org/project/fitvids
Thanks for the link. I didn’t know about FitVids.
Thanks Ivan,
Your write up helped me. However I had a custom url for one of my videos on vimeo and the module failed to pull it through to drupal. Once I figured out the non-custom video url then it worked.
For example – try embeding this video : http://vimeo.com/danshumaker/demoreel
Then try embedding it with it’s # url: https://vimeo.com/6450134
Doesn’t work the first time, but works the second time.
I don’t know if this is a known disclaimer.
-hopefully helpful,
-d-
Thanks for the tip. I didn’t know that Vimeo allows you to create custom URLs.
Raise an issue in the project issue queue about this. (https://drupal.org/project/issues/video_embed_field?categories=All)
HI,
Can it work for facebook video links. I tried and it doesn’t work for facebook links.
Can you please help here.
Thanks,
Leena
The “Video Embed Field” module only supports YouTube and Vimeo out of the box. The module, however, comes with a sub-module called “video_embed_facebook” try using this sub-module.
I have never used it, but it’ll allow you to embed facebook videos.
hi, thanks for tutorial. i wonder how to make embeded video responsive. for example i give max and min size and hight of videos and when i resize screen the videos’ size and height resize automatically. is it possible. recently i see oembed which give us full support for all embeded files. what do you think about? is it good as video embed field module?
thanks.
If you want to make embedded videos responsive look at the FitVids module (https://drupal.org/project/fitvids).
thanks Ivan.
Hello Ivan! I have been following your posts on WebWash for quite a while now. I followed these steps but I came across a problem that i couldnt solve .I was wondering if you could help me with it.
I am using the Video Embed Field Module in Drupal 7. And I need to display thumbnails of the posted videos. I had done exactly what you stated in the blogpost. It worked perfectly while I was working in my local machine.. But when I uploaded it to the remote server, the thumbnails are not displayed. On digging deeper, I encountered an error message “Error Generating Image”. Can you give me some pointers on this? Is there any server configuration that I might have overlooked?
Thanks!
When you say “But when I uploaded it to the remote server,” did you only copy the database across?
The module downloads the thumbnail when you add the video URL to the field. You’ll have to copy over the thumbnails stored in the files directory over to the server.
The “Error Generating Image” message happens because the thumbnails are not on the server.
Try adding a URL into a embed field on the remote server and see if the thumbnail appears. If you’re still having problems, check the remote server’s PHP logs for any errors.
I installed this module on my website the thumbnail preview is not showing in teaser mode. When i create a view block the and select the thumbnail preview for the display it shows on the view edit page but on live pages it not showing. the url for the thumbnail is showing in the view edit page.
sites/default/files/styles/medium/public/video_embed_field_thumbnails/youtube/pnBRFXgaTMo.jpg?itok=n3wOAEBn
Are you getting any errors? Is it just the thumbnail preview not appearing, how about other image styles. Do they work?
Thanx so much for the tutorial. it was rally helpful, but i was wondering if it was possible to embed more than one video and if so how?
Yes it is possible. Just change the “Number of values” option on the field to something greater than 1.
Thanks Ivan for your tutorial, it has been very useful to me. I only want to add that the first time I use the module gave me an error:
Strict warning: Only variables should be passed by reference in template_preprocess_video_embed_field_embed_code() (line 355 of /…/sites/all/modules/video_embed_field/video_embed_field.module).
I had changed this :
$variables[’embed_code’] = drupal_render(call_user_func($handler[‘function’], $variables[‘url’], $variables[‘style_settings’]));
for this
$embed = call_user_func($handler[‘function’], $variables[‘url’], $variables[‘style_settings’]);
$variables[’embed_code’] = drupal_render($embed);
and now it seems to work correctly
Thanks for the tip.
Hey Ivan,
Hope you are doing great. Do you have any solution or suggestions regarding this https://www.drupal.org/node/2881627 or related: https://drupal.stackexchange.com/questions/234098/how-to-create-a-block-of-links-shared-by-a-user
Hi Umair,
I’ve never used the oembed module, sorry can’t help.
Cheers,
Ivan