Using video as part of your content strategy is an excellent way to not only increase user engagement and connect to your audience, but also entertain your readers by using video to complement your text content. Social networks such as Twitter and Facebook are embracing the trend that video marketing has an integral role in user engagement. Reports predict that “by 2018, mobile video will represent 69 percent of global mobile data traffic, up from 53 percent in 2013.” If you haven’t integrated video marketing into your content strategy, it's time to get started. It's easier than ever with the Drupal Media module and its submodule, Media: YouTube.
Getting Started with the Drupal Media and Media: YouTube Modules
To help you get started, I have created a tutorial on how to add YouTube videos to your Drupal 7 site using the Media and Media: YouTube modules. First, let's review what makes the Media and Media: YouTube modules valuable for our project.
The Drupal Media module is one of the most popular Drupal modules as it serves as a framework for multimedia-related contributed modules. Its primary use is as a file browser for multimedia, whether internal or external files. The Drupal Media module can replace the Drupal core upload field. Drupal Media module submodules exist to build on top of this framework. They provide hooks into third-party APIs and external data sources so that the Media module can consume those data sources and display them within the multimedia library or browser to be used throughout your Drupal project.
One such submodule is the Media: YouTube module. This module enables Media to consume YouTube videos and display them as Media field data sources, hooking into all the features and functionality the Drupal Media module offers. This means that you'll be able to display YouTube videos on Nodes, in Views, Panels, or as part of Taxonomy Terms. The Media: YouTube module even provides for a way to display the YouTube video thumbnail and style the thumbnail with your site's image styles. All you'll need is a YouTube video URL.
Take a deep breath, it's time to make your first move. If you feel like you're in over your head or Drupal's Media module is making you queazy, you can always hire the Drupal experts.
Download and Install the Modules
First, head over to Drupal.org and to the project pages for our key modules: Media and Media: YouTube. Be sure to grab the dependencies, too.
If you're using Drush, you'll just need to execute this command:
drush en media media_youtube -yPrimary modules
Dependencies
For this Drupal tutorial, I’m going to assume that you already know how to download and install modules through Drush or manually, so I’ll skip that step.
Module and Drupal Core versions
I will be using Media module 7.x-2.0 alpha 4 and Media: YouTube module 7.x-2.0-rc5. You'll need to use Drupal 7 to follow this tutorial.
Configuring Drupal Media and Media: YouTube Modules
Manage the Video File Display
After you have downloaded and enabled Media and Media: YouTube modules, let’s head over and configure the display settings for your new Video file type. You’ll access this configuration under Structure -> File types.
Most of the time, you won’t need to edit the settings under manage fields or manage display for videos unless you have specific customizations that are required for your project. Navigate to manage file display.
As you see, there’s a set of predefined File Display Modes already in place, so I’ll choose the display handler I wish to use.
You will need to tweak the Display Modes to fit your needs. Typically, I’ll use the Default File Display Handler for my video style that will be used in my Content Type to actually play the videos, and I use the Teaser File Display Handler to display a smaller YouTube preview image in my Views.
The images below illustrate the configuration settings for the Default File Display Handler.
Save the configuration.
If you want to use the YouTube preview images or thumbnails on a View or other location on your site, you will want to update the Teaser File Display Handler settings. Although, I will show you an example of how to set up the Teaser File Display in this tutorial, I will touch more on how to add video to Views in my next tuturial.
The image below illustrates the configuration settings for the Teaser File Handler Display. The image styles available can be configured under Configuration -> Media -> Image Styles.
Add and Configure the Video Field on the Content Type
Now that you have set up your Video File Displays, you can head over to your Content Type to add and configure your YouTube Video field. In my case, I want to add YouTube videos to my Article Content Type. So, I’ll go to Structure -> Content Types and then select Manage Fields on my Article Content Type.
Since the YouTube video is a new field, under Add New Field, choose a Label for your new video field and then select File for the Field Type. Your widget should automatically set to the Media Browser Widget. Save your configuration.
The below images illustrate the configuration for the YouTube Video field settings.
As you can see in the images above, I have chosen the options to enable the Library and Web Plugins. This allows my users to add the URL of YouTube videos or choose a previously added video from the Library. I have also chosen Video as the Allowed File Type, and have chosen my URI schemes. It's important to note here that I have selected Enable Description Field. Enabling the Video Description field is helpful to improve your video's SEO and should be incorporated by you as common practice. Save your configuration.
Manage Display Settings on the Content Type
Next, you’ll need to manage your display settings on your Content Type.
For your YouTube Video field, select Rendered File in your Format Settings. Now, select your View Mode. For me, the View Mode that I want to use is Default, which is the File Display Mode that we setup earlier. Save configuration.
Add an Article Node with Video Content
Now, you can start adding content. Go to Content -> Add content -> select Article (node/add/article). Add your title and other information for your Node. For the Video field, select Browse to add your YouTube Video.
Add the URL of your YouTube Video.
Once added, you will see a thumbnail of your video. Save your content.
You should now see your YouTube video and be able to play your video directly on your site.
Next Steps for your Media: YouTube fields
Displaying your YouTube video and YouTube player is just the first step in utilizing the Media: YouTube module. Now that we have our YouTube video as field data, any of our listings that use the Teaser display will show the thumbnail of the YouTube video. You can use regular image styles to alter the thumbnail sizing or aspect ratio through the file display options instead of the original image option. You could also overlay a play button as a call to action.
You'll probably want to use that thumbnail in Views or even the player in Views as a field display. You might have designs that call for multiple video thumbnails in a carousel or a sidebar. You can integrate your YouTube videos anywhere Views can expose fields from content: in FlexSliders, Views Slideshows, Colorbox dialogs—there's numerous possibilities. All this is now possible by combining Media, Media: YouTube, and Views modules.
Having trouble getting your videos to display? Say hello on Twitter. Did you enjoy the video guide? Subscribe on YouTube for more. Think this guide is useful? Don't forget to share!