How to Easily Add HTML5 YouTube Videos to Your Drupal Site

For my last article, I wanted to include a couple of videos from YouTube.

First, I pondered using the standard YouTube embed code, but I wanted a more simple, elegant solution. The Drupal RepTags module supports powerful macros and it comes with some pre-built YouTube macros, so that wasn’t bad.

But I wanted more: HTML5. Read on and see how easily you can create your own Drupal RepTags, including the code I use to add HTML5 support for the Drupal YouTube RepTag.

One thing I love about Drupal is its modularity and the resulting power to do anything. Which is the main reason why I chose Drupal for my blog in the first place. There’s a module for everything!

Cool Drupal Module: RepTags

A few months ago, Andi and I looked for a way to embed audio podcasts into Drupal (Yes, this is related to a HELDENfunk podcast redesign…) and we decided to use the Rep[lacement]Tags module for that. It even lets you create your own tags!

And for video, it comes with a couple of predefined YouTube tags that look like this:

1

{ YOUTUBE:mgd6vrpHh4f4:512x288 }

(The “mgd6vrpHh4f4” part is the YouTube video ID, you’ll find it after the “v=” part in the YouTube URL of your favorite video.)

Perfect! Well, almost. The code generated by RepTags is still the old-style embed code that uses Flash exclusively.

Now, we all know that Flash is dead (btw, here’s a fun t-shirt on that topic (no link, page no longer exists)), so I wanted an HTML5-savvy version of such a tag.

Embedding YouTube Videos, the HTML5 Way

Fortunately, YouTube tells you exactly how to embed their videos the HTML5 way (no link, page no longer exists), including backwards-compatibility for those browsers that still don’t get it. Cool.

Now let’s bring the new embed code and RepTags together. To do that, you need to:

• Download and Install the Drupal RepTags module,

• Hack Enhance the tags/video.tags.inc file,

• Test, play with and use the result.

Looking into the tags/video.tags.inc file, we notice that there are three pieces we need to modify:

First, the _reptag_video_init() function defines regular expressions for the replacement tags and maps them to PHP functions. This is where we want to insert our own definition of how the HTML5 YouTube-Tag should look like. In our case, we’ll use the same syntax as described above for regular YouTube videos, but add a “5” to its tag name, to denote the HTML5 capability.

(Note: I’m going to use a space after the open brace to prevent the tag from actually being substituted in this blog post. Just make sure you don’t use that space in your case, so it can actually work.)

Here’s the code that I added:

1
2

    "#{ YOUTUBE5:(.*?):([0-9]*)x([0-9]*)}#e"                    => "_reptag_video_youtubevideo5('\\1', \\2, \\3);",
    "#{ YOUTUBE5:(.*?)}#e"                                      => "_reptag_video_youtubevideo5('\\1');",

(Again, drop that extra space before “YOUTUBE5” when using this, folks!)

Easy, isn’t it? In principle, I just copy/pasted a similar example, then modified it to my needs.

Now, there’s also the _reptag_video_help() function which adds a help text for users of RepTags. We should add a short help here, too:

1
2

    "{ YOUTUBE5:id:50x50}"               => "YouTube Video in HTML5 with dimensions (width x height)",
    "{ YOUTUBE5:id}"                     => "YouTube Video in HTML5 (replace id with the 'v' id from your YouTube video)",

Finally, we need a new function that creates the right embed code, which we already defined above. Here’s what it says for me:

1
2
3
4
5
6
7

function _reptag_video_youtubevideo5($youtubeid, $width = 400, $height = 350) {
  $output = <<<EOF
    <iframe class="youtube-player" type="text/html" width="$width" height="$height" src="http://www.youtube.com/embed/$youtubeid" frameborder="0"></iframe>
EOF;

  return $output;
}

Again, just a little bit of copy/paste and some tweaking here and there.

The Result

And lo and behold, the new code works! Now you too can embed YouTube videos in the cool new HTML5 format into your own Drupal sites, by saying something simple like:

1

{ YOUTUBE5:gd6vrpHh4f4:512x288 }

which results in a nicely embedded YouTube video, HTML5 style (if your browser supports it):

Have fun!

Your Take

Have you used the Drupal RepTags module so far? What did you do with it? Have you found other ways of embedding HTML5 video from YouTube that are different/simpler/better? Share your thoughts in the comment section below!

Update: It turns out that you have to opt-in to YouTube’s HTML5 beta program for this embed code to work on Safari and other HTML5 desktop browsers. For iPhone, iPad etc. where there’s no Flash, you’ll automatically be served HTML5.