Creating a Drupal 7 video gallery with the Media module

By pferlito

September 16, 2011

We've been testing different contributed Drupal 7 modules to assess the readiness of the
ecosystem for production sites. The Media module is an ambitious and promising solution
for managing and deploying a variety of media assets. It promises to be the successor to the
very successful Embedded Media Field

After reading the extensive documentation it occurred to me there was a need for a tutorial in this area.

This tutorial will focus on creating a gallery of YouTube videos using the Media and Media YouTube modules. This is the end product we will be building:

Drupal 7 video gallery

In completing this tutorial I used Drupal 7.8 with the following contributed modules:

Install and enable these modules as usual.

Video content type

First we need to create a video content type.
Go to Structure -> Content types -> Add content type and fill in the form. Call the content
type 'YouTube video'. Leave all other settings unchanged and save the content type.

Drupal 7 video gallery

Video field

Next we'll create a field to hold our video. Click on the Manage Fields tab and add a
new field 'video' of type 'Multimedia asset' with a widget of 'Media file selector'. Click Save.

Drupal 7 video gallery

Click on Save field settings button on the next page. You will now be on the
settings screen for the new video field. Under 'Allowed media types' check
the Video checkbox. In 'Allowed URI schemes' check the youtube:// URI box. The click
on the Save settings button.

Drupal 7 video gallery

Field display settings

Now click on the Manage Display tab and select Media for the video format. Click Save.
Now click on the gear icon in the Video row. Select the Default file view mode and click
on the Update button.

Drupal 7 video gallery

File types

This next part is what trips people up and has caused confusion. We need to enable the
displays for the Youtube video 'files'. To do this go to Configuration -> Media -> File types.
Make sure the Default tab is select in the upper right. Check the YouTube Video and YouTube
Preview Image checkboxes. Then check the YouTube Video Display setting and enter the width
and height of your video. In the YouTube Preview Image tab enter the preview image style.
Save the configuration.

Drupal 7 video gallery

Add videos to library

Our site is now ready to accept our videos. To add your videos go to Content -> Media ->
Media browser. Click on the Web tab. Paste the URL of your video. Use the browser URL
of the video. Don't use the embed code, as of today if you use the embed code you will
get the WSOD.
Drupal 7 video gallery

Create video nodes

Now that we have video in our library we need to create a series on video nodes. The procedure
is the following. Go to Content -> Add content. Click on the YouTube Video link.
Fill in the title and body. In the the video section click on Select Media. Click on the
Library tab and select your video. Save the node. Repeat this procedure for all your videos.

Drupal 7 video gallery

Create the gallery view

Now that we have set up the nodes we can create our gallery using Views. I won't cover
the ins and outs of Views but assuming you've been following along, you can import
this view into your site to create it.