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.
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
|Field type||Video Embed|
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
|View 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.