Creating a Drupal 7 video gallery with the Media module

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:

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

• CTools v.7.x-1.0-rc1
• Media v.7.x-2.0-unstable1
• Media Youtube v.7.x-1.0-alpha5
• Views 7.x-3.0-rc1

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.

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.

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.

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.

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.

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.

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.

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.