Embedding Videos in a Drupal Website

Share on FacebookTweet about this on TwitterShare on LinkedIn

Share on FacebookTweet about this on TwitterShare on LinkedIn

Embedding rich media content on your website can significantly enhance the user experience, while also effectively delivering content to the user. In addition, embedding videos in a website is not as complicated as it used to be. However, integrating video and audio content on a Drupal site requires both knowledge of appropriate community modules and an understanding of how to configure and connect them properly. Thankfully, there are many options for embedding videos into a Drupal-built website using external hosts. In this article we will look at ways to embed media housed on external hosts like YouTube and Vimeo.

segue-blog-embedding-videos-drupal-site

Media

The Media module provides an extensible framework for managing files and multimedia assets, regardless of whether they are hosted on your own site or on a third party site. However, Media itself does not manage the playing/display of videos, and requires other contributed modules as add-ons to make all that work. Media and Media: Youtube will let you embed YouTube videos, while Media and Media: Vimeo will let you embed videos from Vimeo.

However, the implementation and comprehensive understanding of all the dependencies involved in configuring the media module to work in unison is not straightforward and can be a bit confusing. Also, implementation issues are not always static and can be dependent on your development environment. As a result, the media module, while it seems like an obvious candidate is not necessarily the best one.

Embed YouTube Videos

One of the most simple and probably the most obvious embedding methods is to  simply embed a video by allowing an administrator to have the appropriate HTML filter permissions, and to  just paste the YouTube embed code right in the content area of a node.

To do this, click on the “share” button located below the video and then click on embed. Make the appropriate selections for the size of the video and other options via checkboxes provided below the video. The embed html looks like something shown below

Now, copy the HTML and paste it directly into the body of your node (article/page etc). For this to work, you will have to change the text format to “Full HTML”. While this will enable you to embed YouTube video into your page, doing so could pose a potential security threat as it exposes full HTML access to a number of contributors. The thread could be mitigated, though, by a combination of  limiting the ability to post videos to a specific group or using the Video Filter (more information on that below). The same procedure could be implemented to embed Vimeo video, using the Vimeo-provided embed code.

Video Filter

To get around the security concerns related to allowing full HTML access, you could use a module named Video Filter This module is an easily extendable filter module that lets you embed videos using a simple token (

[video:url]

). After installing the module, configure the “Filter HTML” text format by going to Configuration, “Text formats” and clicking on configure in the “Filter HTML” row and enabling the video filter. After enabling the filter, make sure to reorder the filter so that “Video Filter” is after “Limit allowed HTML tags” and before “Convert URLs into links”. You may have to experiment with the ordering to get it to work.

Once you have the configuration done, find the URL for the YouTube video you want to embed and insert code that resembles the examples shown below directly into the body of your node.

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

This will enable the users to embed videos without compromising your site’s security.

YouTube Field

Another module and, probably the simplest of all, is the YouTube Field. With this option, you’ll need to install the module, add the new field type to a content type, create new content, paste the YouTube URL link, and you are done. However, the downside to this is that it only accommodates one default player size.

Simply copy your YouTube link eg: http://www.youtube.com/watch?v=foTuutq05CM to the YouTube field and you are done.

Video Embed Field

Video Embed Field is another module that is similar to the YouTube module. However, after adding the field to your content type, you will have the ability to create multiple display formats under the “Manage Display” tab of the content type. In addition to this, Video Embed Field also supports Vimeo videos.

It’s important to keep in mind that,  while all of these solutions work, the correct choice comes down to having a very clear understanding of both the current requirements and a reasonable amount of foresight as to what the requirements may become in the near future.

Need Help? Contact us