How to Embed Videos using Video Filter in Drupal 7

The Video Filter module allows you to easily embed videos into Drupal sites using a simple token ([video:url]). Setting up the module is pretty straight forward. All you have to do is enable the filter in a desired text format, adjust the order of the existing filters, and you’re done.

The embed code for YouTube and many other video sites is an iframe HTML tag. By default, Drupal will filter out any iframe HTML code if anonymous and authenticated users use the Filtered HTML text format. Bottom line is you don’t want users to simply paste in iframe HTML code into Drupal.

By using Video Filter users can easily embed videos from YouTube by pasting in [video:URL] instead of an iframe. This is a perfect solution for a community website built in Drupal, especially if you allow users to participate in a forum.

It’s important to understand that this module is not a replacement for Media module. If you’re looking for a proper media solution, then look at Media or Scald.

Also, here are two other modules that will help you embed videos: Video Embed Field and oEmbed.

In this tutorial, we’ll configure Video Filter on the “Filtered HTML” text format. The module also comes with a button that allows you to add tokens easily using Wysiwyg editors, we’ll setup this button in CKEditor.

Getting Started

Before we can begin, go download and install Video Filter.

If you use Drush, run the following commands:


$ drush dl video_filter

$ drush en video_filter

Configure Video Filter on “Filtered HTML” Text Format

The simplest way to use this module is to add it to a text format. In this section, we’ll setup the filter on the Filter HTML text format.

1. Go to Configuration, “Text formats” and click on configure in the “Filter HTML” row.

2. Check the “Video Filter” filter so that it gets added.

3. Now comes the tricky part; reorder the filter so that it’s after “Limit allowed HTML tags” and before “Convert URLs into links”. This is important and may take a bit of experimenting.

Fig 1.0

4. Once you’ve reordered the filter click on “Save configuration”.

You can also configure some of the filter settings like default width and height, as well as autoplay and more. Click on the “Video Filter” tab in the filter settings area to configure it.

Fig 1.1

That’s all for the basic setup, now go to Content, “Add content” and click on Article.

Enter in a title and paste in the following token:

[video:http://www.youtube.com/watch?v=PCLx4fRHmCk]

Fig 1.2

Once you’ve saved the article, you’ll see an embedded YouTube video.

Fig 1.3

You can even configure certain video settings directly from the token.

Here are all the available settings:

[video:url width:X height:Y ratio:X/Y align:left/right autoplay:1/0]

Video Filter Button in CKEditor

The module also ships with a Video Filter button that integrates it with a few WYSIWYG editors. I’ll show you how to add the button to CKEditor using Wysiwyg. I won’t go through the steps of setting everything up, or this tutorial will be huge. I’ll assume you already have a basic setup of CKEditor.

Go to Configuration, “Wysiwyg profiles” and edit an existing profile. Click on the “Buttons and plugins” field-set and check the “Video filter” button, then click on Save.

Fig 1.4

Now go to Content, “Add content” and Article.

Click on the “Video filter” button, fill out the form and then click Insert.

Fig 1.5

The integration with Wysiwyg does not work like the Media module. You won’t see a preview of the video, it’ll just display the token.

Fig 1.6

Now, save the form and you should see an embedded video.

Fig 1.7

Video Filter is great because it’s a quick and simple solution for embedding videos into Drupal. The biggest benefit to using this module is the ability to allow users to embed videos without compromising your site security.

If you have any questions, please leave a comment.

Ivan Zugec

About Ivan Zugec

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.

6 thoughts on “How to Embed Videos using Video Filter in Drupal 7”

  1. Ivan,

    I believe you will find that Video Filter will not delivery what it is designed to when the Drupal site is running with HTTPS. I need a solution that interoperates with HTTPS. Perhaps Scald?

    Bob

      1. I had already tried that specific patch. No cigar, unfortunately, because otherwise the module is very nice.

        Scald is next on the list.

  2. hi, thanks for tutorial. could it be possible to write link to text field and show the video in iframe no in editor.

    thanks,

  3. Great tutorial, this is exactly what I was looking for. It is quite strange that the order of the filters is not mentioned in the official description of the module!

Leave a Comment

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Media Management in Drupal

Download a FREE 8 part video course on managing media in Drupal.