May 12 2008

How to add YouTube video in Hippo CMS

For anyone who has tried to add YouTube's embed code into the Xinha WYSIWYG editor of Hippo CMS: Yes it's possible to add references to YouTube, Google video or any other Flash animation. No, just copy-pasting the HTML snippet from YouTube or Google video will not work, because it is not valid XHTML. I will explain how to enable YouTube support in Hippo CMS.

Customizing the document templates

First extend the standard Hippo CMS. Copy HtmlCleanerConfiguration.xml to your extensions folder. This file can be found in /editor/src/site/editing/cf2/resources.

Add the necessary elements and attributes for Flash within the allowed-elements. You can add elements and attributes that are valid according to the xhtml1-strict (Hippo CMS 6.05) or xhtml1-transitional (Hippo CMS 6.06) specification.


<element
      name="object">
  <attribute
      name="width"/>
  <attribute
      name="height"/>
  <attribute
      name="data"/>
  <attribute
      name="type"/>
</element>

<element
      name="param">
  <attribute
      name="name"/>
  <attribute
      name="value"/>
</element>

Change the reference to the HtmlCleanerConfiguration in the business logic of the document type.


<convertor
      type="htmlcleaner"
      config="extensions://HtmlCleanerConfiguration.xml"
      use="datamodel"/>

Inserting HTML for Flash

Open the document, toggle to HTML view and paste the embed code from YouTube.

Change the HTML into valid XHTML like this:


<object
      data="http://www.youtube.com/v/3Rj9oiNZiog&amp;hl=en"
      height="355" type="application/x-shockwave-flash"
      width="425">
  <param
      name="movie"
      value="http://www.youtube.com/v/3Rj9oiNZiog&amp;hl=en"/>
  <param
      name="wmode"
      value="transparent"/>
</object>

Toggle back to the WYSIWYG view, save and you're done.