Adding a Gametrailers.com video tag

A customer of mine recently wanted to know if I could gin up a custom ubbcode tag for Gametrailers.com and I obliged him.

The first thing is to note a pattern that can be matched from the video URL and the resulting embed code at the site. In most cases, this is what you want to do; look at a source URL or other identifier and try to find a correlation between that and the resulting html markup that is normally called the embed code.

For this example, the URL I used was:

http://www.gametrailers.com/video/pax-east-breach/63822

and the resulting embed code was:

<div style="width: 480px;">
  <object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
    id="gtembed"
    width="480"
    height="392">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="movie" value="http://www.gametrailers.com/remote_wrap.php?mid=63822"/>
  <param name="quality" value="high" />
  <embed
    src="http://www.gametrailers.com/remote_wrap.php?mid=63822"
    swLiveConnect="true"
    name="gtembed"
    align="middle"
    allowScriptAccess="sameDomain"
    allowFullScreen="true"
    quality="high"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    type="application/x-shockwave-flash"
    width="480"
    height="392">
  </embed>
  </object>
<div style="font-size: 10px; font-family: Verdana; text-align: center; width: 480px; padding-top: 2px; padding-bottom: 2px; background-color: black; height: 32px;">
  <div>
    <a style="color:#FFFFFF;" href="http://www.gametrailers.com" title="GameTrailers.com">Video Games</a> |
    <a style="color:#FFFFFF;" href="http://www.gametrailers.com/game/breach/12938" title="Breach">Breach</a> |
    <a style="color:#FFFFFF;" href="http://www.gametrailers.com/video/pax-east-breach/63822" title="PAX East 10: Destruction Walkthrough">PAX East 10: Destruction Walkthrough</a>
  </div>
  <div style="padding-top: 3px;">
    <a style="color:#FFFFFF;" href="http://xbox360.gametrailers.com/" title="XBox 360">XBox 360</a> |
    <a style="color:#FFFFFF;" href="http://ps3.gametrailers.com/" title="PS3">Playstation 3</a> |
    <a style="color:#FFFFFF;" href="http://wii.gametrailers.com/" title="Wii">Nintendo Wii</a>
  </div>
</div>
</div>

I cleaned up the code to be on multiple lines, instead of a giant glob of embed code, for readability.

The first thing I want to do is just to remove the extraneous crap after the object and embed code. No need to have all those extra links, so we’ll just remove them and the resulting embed code looks like this:

<div class="gt-embed">
  <object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
    id="gtembed"
    width="480"
    height="392">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="movie" value="http://www.gametrailers.com/remote_wrap.php?mid=63822"/>
  <param name="quality" value="high" />
  <embed
    src="http://www.gametrailers.com/remote_wrap.php?mid=63822"
    swLiveConnect="true"
    name="gtembed"
    align="middle"
    allowScriptAccess="sameDomain"
    allowFullScreen="true"
    quality="high"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    type="application/x-shockwave-flash"
    width="480"
    height="392">
  </embed>
  </object>
</div>

Also note that I wrapped the whole thing in a containing div with the class=”gt-embed”

The key things to note is the relationship between the URL and the resulting embed and to further hone in on that point, lines 10 and 13 are key. They take the numeric value from the URL and include it there.

This is where a regex comes into play. We’ll capture that number from the URL and substitute it into the embed code and be done with it.

The regex that does this is:

(|.*/video/.*/)(\d+)

It has two captures, with the first one being just to discard all of the URL up to the final numeric value. The second capture is then used in the substitution markup as follows:

<div class="gt-embed">
	<object
		classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
		codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
		id="gtembed"
		width="480"
		height="392">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="movie" value="http://www.gametrailers.com/remote_wrap.php?mid=\\2"/>
	<param name="quality" value="high" />
	<embed
		src="http://www.gametrailers.com/remote_wrap.php?mid=\\2"
		swLiveConnect="true"
		name="gtembed"
		align="middle"
		allowScriptAccess="sameDomain"
		allowFullScreen="true"
		quality="high"
		pluginspage="http://www.macromedia.com/go/getflashplayer"
		type="application/x-shockwave-flash"
		width="480"
		height="392">
	</embed>
	</object>
</div>

Lines 10 and 13 use the \\2 to represent the 2nd capture value; namely the number.

That’s it!

One further thing to note is that the gametrailer site also has user videos too and the relationship between URL and resulting embed is slightly different. It is different enough to warrant another ubbcode tag.

Rather than go into all of what would pretty much be the same concept, I will just include the exported tags. You can import both of them in the Custom Tag editor and make any changes you’d like. For example, you might want to use different tags than what I chose ([video:gt]

and[video:gtu]

).

That is all up to you.