YouTube Video and Website Media Players

YouTube is by far the most popular video sharing site on the web. Many people have asked me how to embed YouTube videos into their website and with innovations such as the YouTube API there are a wealth of options to help the website owner integrate YouTube videos.

The following represents the tip of the iceberg as far as Drupal modules are concerned as there are new projects popping up on a regular basis with goal of providing the best Drupal media module to handle the administration of uploading, linking and integrating YouTube videos for both Drupal CMS.

Drupal Video Modules

  1. The simple approach - use the YouTube embed code directly within nodes. This is the easiest method to get YouTube videos on your site, simply copy and paste the embed code provided by YouTube and make sure to set the input format to 'Full HTML' before saving the post. This will allow Drupal to correctly output the YouTube embed code, otherwise you may end up with a broken web page.
  2. A module based approach - The video filter module. The video filter module allows you to embed YouTube video by adding some code to the post using the following filter/mark up: [video:video-url].
  3. Another module based approach - The embedded media field module. The Embedded media field module is a multipurpose embedding module that supports video, audio and images. The video part of the module provides access to YouTube and a variety of video hosting websites. The module allows you to create a field using CCK that will accept the link to a YouTube video and automatically convert that link to an embedded video player in the node.

Players and Interfaces

Having tested a range of video players and video display interfaces for the web, I recommend the following players and display styles:

Multipurpose Media Player

JW Player

The JW Player has evolved steadily over the past five years and has found a new home at Long Tail Video. The beauty of the JW Player is that it is capable of playing a variety of media types and is a very useful all-in-one presentation solution for your website.

Lightbox Style Video Overlays

High Slide Website Overlay

I have used the High Slide JavaScript image, media and gallery viewer a number of times and I'm always amazed by its small file size and fast loading times. The High Slide viewer can be used with Flash videos and the JW Player so makes the ideal implementation for your screen casts and other media assets hosted on YouTube. The only downside to the High Slide viewer is that it has not been written within a JavaScript framework so will add a little weight to overall size of your Drupal (JQuery) or Magento (Prototype JS/Scriptaculous) website, but the file size is so small that you will barely notice.

I have successfully deployed High Slide JS on Magento websites and it really is a breeze to use once the initial set up has been achieved.

Shadow Box JS

Shadow Box JS is another widely used JavaScript overlay for playing Flash video content and has a fairly small file size in its basic form, however be careful as this can become bloated due the plethora of features and settings within the Shadow Box JS. Shadow Box JS can be used with the JW Player, thus providing a seamless fit between media player and display.