How to add YouTube video in Hippo CMS

Published on 12 May 2008

For anyone who has tried to add YouTube’s embed code into the Xinha What You See Is What You Get (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.

Embed code in the HTML mode in the Xinha editor

Change the HTML into valid XHTML like this:

<object data="http://www.youtube.com/v/3Rj9oiNZiog&amp;hl=en" 
        type="application/x-shockwave-flash" 
        height="355" 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 are done.