Drupal Flash Video Lightbox Tutorial

BLOG

Aim
This tutorial will provide you with the necessary information to:

  • configure Drupal and the SWF Tools and Lightbox2 modules.
  • create an ImageCache preset.
  • create a new content type for uploading flash video and its corresponding video screengrab image.
  • create a basic view that only displays thumbnails of the video screengrab images.
  • modify the view to display and play the corresponding flash video in a Lightbox2 overlay after clicking on the screengrab thumbnail.
  • solve problems if this tutorial doesn't work.
  • take it a step further...

This tutorial was created using a 'clean' Drupal installation i.e. one that didn't contain any content or additional modules. For a better understanding of the Lightbox2 and SWF Tools modules, this tutorial deals with the most basic, minimum requirements for displaying flash video in a Lightbox2 overlay, which is launched by clicking on a thumbnail image that has been automatically created by ImageCache, and only includes the steps that are necessary to achieve this aim. It has been successfully tested with *.swf, *.flv and *.mp4 videos both online and locally using WAMP.

We are very happy at waldbeek.com to release this tutorial to the Drupal community as a 'thank you' to all of the people who continually provide their knowledge and support for free to maintain and extend Drupal - keeping it the number one open source, free content management system - please feel free to link to this tutorial and tell the world about it.

Minimum Software Requirements

Content Management System
 Version Download Link
Drupal 6.15 http://drupal.org

 

Modules Version Download Link
Administration Menu 1 6.x-1.5 http://drupal.org/project/admin_menu
Backup and Migrate 1 6.x-2.2 http://drupal.org/project/backup_migrate
CCK 6.x-2.6 http://drupal.org/project/cck
FileField 6.x-3.2 http://drupal.org/project/filefield
ImageAPI 6.x-1.6 http://drupal.org/project/imageapi
ImageCache 6.x-2.0-beta10 http://drupal.org/project/imagecache
ImageField 6.x-3.2 http://drupal.org/project/imagefield
Lightbox2 6.x-1.9 http://drupal.org/project/lightbox2
SWF Tools 6.x-2.5 http://drupal.org/project/swftools
Views 6.x-2.8 http://drupal.org/project/view

1 These modules are recommended but are not absolutely necessary for this tutorial.

Additional Files
 Version Download Link
JW Flash Player 2
Version http://www.longtailvideo.com/players/jw-flv-player

2 The Longtailvideo JW Flash Player is free for non-commercial use only.

1] Installing the Modules and Additional Files

1.1] Unpack and install the JW Flash Player listed in the Additional Files table in the libraries folder - NOTE: you might need to manually create this folder with your FTP program:
'http://your-server.com/drupal-installation-root-folder/sites/all/libraries'.
1.2] Unpack and install the modules listed in the Modules table in the standard third-party module folder in Drupal:
'http://your-server.com/drupal-installation-root-folder/sites/all/modules'.

drupal-installation-root-folder/ sites/ all/ libraries/ mediaplayer
   
modules/ admin_menu
        backup_migrate
        cck
        filefield
        imageapi
        imagecache
        imagefield
        lightbox2
        swftools
        views

2] Enable the Modules

2.1] Using your browser, navigate to 'http://your-server.com/drupal-installation-root-folder/admin/build/modules/list' and enable the checkboxes for:

  • Administration menu (optional)
  • Content
  • FileField
  • ImageField
  • ImageAPI
  • ImageAPI GD2
  • ImageCache
  • ImageCache UI
  • Backup and Migrate (optional)
  • Lightbox2
  • SWF Tools
  • Views
  • Views UI

Click the [Save configuration] button.

3] Configure the Settings for SWF Tools and Lightbox2

The most confusing aspects of these modules are:

  • The settings for SWF Tools on the modules administration page. Because we are not trying to play flash video that is embedded within the node itself in this tutorial, it is not necessary to enable any of the third-party players for SWF Tools on the modules administration page - only the SWF Tools module itself should be enabled (Image 3.1). These settings do not have anything to do with the JW Flash Player that is installed in 'http://your-server.com/drupal-installation-root-folder/sites/all/libraries/mediaplayer'.

Image 3.1 - SWF Tools module settings
Image 3.1 - SWF Tools module settings.

  • The settings for the 'File handling' for SWF Tools - from the administration menu, select: 'Site configuration > SWF Tools > File handling' and expand the 'File handling' section. Even though none of the third-party players have been enabled on the modules administration page for SWF Tools, it is still possible to use the 'Generic FLV player' to play flash video that is embedded within the node itself (Image 3.2).

Image 3.2 - SWF Tools File handling settings
Image 3.2 - SWF Tools File handling settings.

  • The 'Video settings' for Lightbox2 - from the administration menu, select: 'Site configuration > Lightbox2 > General' and expand the 'Video settings' section. By default, the 'Enable video support' setting for Lightbox2 is disabled. Even after enabling this checkbox and saving the settings, Lightbox2 will still not be able to display flash video because the default setting for the 'Path to FLV Player:' is wrong. This must be set to 'sites/all/libraries/mediaplayer/player.swf' (Image 3.3) - which is the path to the JW Flash Player that is installed in 'http://your-server.com/drupal-installation-root-folder/sites/all/libraries/mediaplayer'.

Image 3.3 - Lightbox2 Video settings
Image 3.3 - Lightbox2 Video settings.

4] Create an ImageCache Preset for the Video Screengrab Thumbnail

From the administration menu, select: Site building > ImageCache > Add new preset

4.1] Enter a name for the new preset in the 'Preset Namespace:' text field e.g. 'Video_Thumbnail_Preset' (Image 4.1).

Image 4.1 - Adding a new ImageCache preset
Image 4.1 - Adding a new ImageCache preset.

Click the [Save Preset] button.


4.2] Set the image processing actions for the preset:
Click the 'Add Scale' link.
Set the Width to 200 and the Height to 150 (200 x 150 = 4:3 aspect ratio) (Image 4.2).

Image 4.2 - Setting the ImageCache Actions
Image 4.2 - Setting the ImageCache Actions.

Click the [Create Action] button.

5] Create a new Content Type for the Video and Screengrab Image

From the administration menu, select: Content management > Content types > Add content type

5.1] Define the content type on the 'Content types' page:
Specify the name for the new content type in the 'Name:' field e.g. 'Video'.
Specify the type for the new content type in the 'Type:' field e.g. 'video'.
Click on the 'Workflow settings' link to display the default options and disable the checkbox for 'Promoted to front page' (Image 5.1).

Image 5.1 - Defining the Video content type
Image 5.1 - Defining the Video content type.

Click the [Save content type] button. This action will display the list of content types.

5.2] Add and Configure Two Custom Content Fields to the New Video Content Type
Click the 'manage fields' link for the Video content type. The next screen displays a list of the fields that currently exist in the Video content type.

5.2.1] Add a new field for uploading the flash video file:
Define the name for the field in the 'Label' text field e.g. 'Video'.
Define the internal Drupal name for the field in the 'Field name' text field e.g. 'field_video'.
Set the 'Type of data to store' dropdown to 'File'.
Set the 'Form element to edit the data' dropdown to 'File Upload' (Image 5.2.1).

Image 5.2.1 - Adding a flash video upload field to the Video content type
Image 5.2.1 - Adding a flash video upload field to the Video content type.

Click the [Save] button. The options for this new Video File Upload field are displayed on the next page.

Change the 'Permitted upload file extensions:' from 'txt' to 'swf flv mp4'.
In the 'Global settings' section, enable the 'Required' checkbox.
Click the [Save field settings] button. The list of fields existing in the Video content type is displayed again.

5.2.2] Add a new field for uploading the video's screengrab image file:
Define the name for the field in the 'Label' text field e.g. 'Video Thumbnail'.
Define the internal Drupal name for the field in the 'Field name' text field e.g. 'field_thumb'.
Set the 'Type of data to store' dropdown to 'File'.
Set the 'Form element to edit the data' dropdown to 'Image' (Image 5.2.2).

Image 5.2.2 - Adding a video screengrab image upload field to the Video content type
Image 5.2.2 - Adding a video screengrab image upload field to the Video content type.

Click the [Save] button. The options for this new image field are displayed on the next page.

In the 'Global settings' section, enable the 'Required' checkbox.
Click the [Save field settings] button. The list of fields existing in the Video content type is displayed again.

5.2.3] Set the method for displaying the fields:
Click the 'Display fields' tab.
Set the 'Label', 'Teaser' and 'Full node' dropdowns for both custom 'Video' and 'Video Thumbnail' content fields to <hidden>. This setting makes the flash video and screengrab image invisible when a node of the new Video type is displayed in teaser or full node mode (Image 5.2.3).

Image 5.2.3 - Setting the Teaser and Node display method for the custom fields to <hidden>
Image 5.2.3 - Setting the Teaser and Node display method for the custom fields to <hidden>.

Click the [Save] button.

6] Create a Video Node - Upload a Flash Video and its Screengrab Image using the New Video Content Type

From the administration menu, select: Content management > Create content > Video

Specify the 'Title:' for the Video node e.g. 'Video 01'.
Scroll down the page and select the flash video by clicking the [Browse] button next to the empty 'Video:' field.
Select the screengrab image (that will be used for the thumbnail) by clicking the [Browse] button next to the empty 'Video Thumbnail:' field (Image 6.1).


Image 6.1 - Creating a Video node
Image 6.1 - Creating a Video node.

Click the [Save] button. The new Video node should be displayed but the flash video and the associated screengrab image will not be visible (because these fields were set to <hidden> in step 5.2.3).

NOTE: This tutorial will be more effective if you create several Video nodes, each containing one flash video and one screengrab image.

7] Create a Basic View to Display Content from the Video Nodes

From the administration menu, select: Site building > Views > Add

Specify the name for the new view in the 'View name:' field e.g. 'View_Video'.
Enter a description for the new view in the 'View description:' field e.g. 'Displays content from nodes of the Video content type' (Image 7.1).

Image 7.1 - Defining a Video View
Image 7.1 - Defining a Video View.

Click the [Save] button. The standard 'Edit view' screen will be displayed for the new 'View_Video' view.

7.2] Set the Default display parameters for the view
7.2.1 ] Click the [+] symbol in the Filters section and add two filters:
Scroll down the list of 'Default: Add filters' and enable the checkboxes for 'Node: Published' and 'Node: Type' (Image 7.2.1).

Image 7.2.1 - Adding two filters to the Default display
Image 7.2.1 - Adding two filters to the Default display.

Click the [Add] button.
In the 'Defaults: Configure filter Node: Published' section that will appear, enable the 'Published:' > 'Yes' radio button. Click the [Update] button.
In the 'Defaults: Configure filter Node: Type' section that will appear, enable the 'Node type:' > 'Video' radio button. Click the [Update] button.

NOTE: A warning will be displayed automatically: 'Display "Defaults" uses fields but there are none defined for it or all are excluded.'. This is a standard warning - you haven't done anything wrong! Let's add some fields to the Default display...

7.2.2] Click the [+] symbol in the Fields section and add two fields:
Scroll down the list of 'Default: Add fields' and enable the checkboxes for 'Content: Field (field_video)' and 'Content: Field (field_thumb)' (Image 7.2.2).

Image 7.2.2 - Adding two fields to the Default display
Image 7.2.2 - Adding two fields to the Default display.

Click the [Add] button.
In the 'Defaults: Configure field Content: Video (field_video)' section that will appear, enable the 'Exclude from display' checkbox. Click the [Update] button.
Enable the 'Label:' > 'None' radio button.
Set the 'Format:' dropdown to 'URL to file'. Click the [Update] button.
In the 'Defaults: Configure field Content: Video Thumbnail (field_thumb)' section that will appear, enable the 'Label:' > 'None' radio button.
Set the 'Format:' dropdown to 'Video_Thumbnail_Preset image'. Click the [Update] button.
Click the [Save] button to save the Default display settings.

7.3] Add a Page display to the new 'View_Video' view
7.3.1] Make sure the dropdown is set to 'Page' and click the [Add display] button.

NOTE: All of the settings that were made to the Default display in step 7.2 are applied to the new Page display automatically. This means that when this Page display is initiated (i.e. displayed as a standard Drupal node), only the 'Video Thumbnail' fields will be displayed as 200x150 pixel thumbnail images (using the 'Video_Thumbnail_Preset' ImageCache preset) that exist on every Video content type that has been published.

NOTE: A warning will be displayed automatically: 'Display "Page" uses a path but the path is undefined.' This is a standard warning - you haven't done anything wrong! Let's define the path for the new Page display...

7.3.2] In the 'Page settings' section, click the 'Path: None' link.
In the 'Page: The menu path or URL of this view' section that will appear, enter the path for the Page display e.g. 'videos' (Image 7.3.2).

Image 7.3.2 - Setting the Path for the Page display
Image 7.3.2 - Setting the Path for the Page display.

Click the [Update] button.

Click the [Save] button to save the Page display settings and the overall view.

7.4] Test the Page display of the 'View_Video' view
Using your browser, navigate to 'http://your-server.com/drupal-installation-root-folder/videos'. You should see a node containing a list of the 'Video Thumbnail' fields in 200x150 pixel format. At the moment, nothing will happen if you click on a thumbnail - Lightbox2 will not be initialised and the corresponding flash video will not be played.

7.5] Modify the Page display to display the flash video in Lightbox

From the administration menu, select: Site building > Views > List

7.5.1] In the 'Normal Node view: View_Video' row, click the 'Edit' link. The Default display of the View_Video view configuration page will be displayed.
Important: Make sure that you click on 'Page' in the left-hand column to select the Page display.

NOTE: The Page display is currently using the settings from the Default display - which is illustrated by the italicised text for all of the sections apart from the 'Page settings' section.

7.5.2] In the 'Fields' section, click on the 'Content: Video Video_Thumbnail_Preset image' link.
IMMEDIATELY click the [Override] button on the right-hand side of the 'Page: Configure field Content: Video Thumbnail (field_thumb)' section.
Enable the 'Rewrite the output of this field' checkbox. This action will reveal the 'Replacement patterns' options for this setting.

Image 7.5.2 - Configuring the Video Thumbnail field for the Page display
Image 7.5.2 - Configuring the Video Thumbnail field for the Page display.

The 'Replacement patterns' section details the substitution patterns for the two fields. These patterns are used to dynamically generate the link that will be applied to each of the video thumbnail images on the 'videos' node. The substitution patterns should be:

  • [field_video_fid] == Content: Video (field_video)
  • [field_thumb_fid] == Content: Video Thumbnail (field_thumb)

If they do not appear exactly in this order, the order of the fields themselves in the Page view will need to be changed.

7.5.3] In the 'Text:' text area underneath the 'Rewrite the output of this field' text, enter the following html code:

<a href="[field_video_fid]" rel="lightvideo">[field_thumb_fid]</a>

Image 7.5.3 - Rewriting the output of the Video Thumbnail field for the Page display
Image 7.5.3 - Rewriting the output of the Video Thumbnail field for the Page display.

This line of code enables Drupal to output a standard html link, where the target is the path to the flash video (defined by the dynamic [field_video_fid] code). The link itself is applied to the corresponding video screengrab thumbnail (defined by the dynamic [field_thumb_fid] code). The most important part of the code is rel="lightvideo" - this initialises Lightbox2 and enables the video to be displayed and played by the JW Flash Player within the Lightbox2 overlay.

Click the [Update] button to save the modifications made to the overridden 'Content: Video Video_Thumbnail_Preset image' field.

Click the [Save] button to save the Page display settings and the overall view.

8] Test the Page display of the 'View_Video' view
Using your browser, navigate to 'http://your-server.com/drupal-installation-root-folder/videos'. You should see exactly the same node containing a list of the 'Video Thumbnail' fields that you obtained in step 7.4. However, after clicking on a thumbnail, Lightbox2 should now be initialised and the corresponding flash video should be played using the JW Flash Player.

Solving Problems

  • Ensure that your browser is able to play flash video i.e. the flash browser plugin is installed correctly.
  • Ensure that both the Lightbox2 and SWF Tools modules are installed correctly and are enabled on the modules administration page.
  • Ensure that both the Lightbox2 and SWF Tools settings are configured correctly.

Enhancing this Technique

  • Naturally, in the spirit of the Drupal community and the Open Source movement, it would be preferable to play the flash video with a truly free, open-source flash player.
  • The view could be highly modified to suit your taste: output a different display, such as a block - add sorting - only select videos tagged with a specific taxonomy term or uploaded by a specific user - use paging - use panels........
  • The flash player could be modified for each video dynamically, according to it's dimensions.
  • A thumbnail could be displayed as a background before the video is played.
  • e.t.c........


Any trademarks mentioned in this article are the property of their respective owners.