I am not sure if this is the correct way of doing this, but this does seem to work and is quite easy to work with. After further reading it seems that the <object>
element is designed for embedding videos, media and ActiveX controls.
On initial inspection the process of embedding YouTube videos seems rather complicated. Several blogs/forums make reference to copying the (old-style) YouTube embed code and ditching the parts which are incompatible with DITA. Unfortunately this technique is reported to cause playback issues in some situations.
- http://flowwrite.blogspot.co.uk/2008/08/how-to-embed-youtube-video-into-dita.html
- http://code.google.com/p/jallib/issues/detail?id=109
So instead I decided to experiment with using the <object>
element but with customised stylesheets making this entire process easier. I am not sure if this approach is technically valid, input would be appreciated on that point.
- @type - Specify a value of "youtube" to trigger custom XSL rendering.
- @data - YouTube video ID can be copied from embed code.
- @width (optional) - Width of YouTube video in browser, defaults to 600px.
- @height (optional) - Height of YouTube video in browser, defaults to 450px.
Here is an example of a video embed using this technique:
<!-- DITA markup -->
<fig audience="web">
<title>YouTube 101: How to Find What's Hot on YouTube</title>
<object type="youtube" data="FEyRza0rJyI">
<desc>This video explains how to tap into the cultural zeitgeist happening on YouTube right now.</desc>
</object>
</fig>
In order to make this work it is necessary to alter the way in which the XHTML output is generated. Fortunately this is extremely easy with DITA Converter (aka Ditac) by XML Mind. I simply added the following to my XSL customisation stylesheet:
<!-- Customize html output (works with DITA Converted by XML Mind) -->
<xsl:template match="*[contains(@class,' topic/object ') and @type='youtube']">
<iframe src="http://www.youtube-nocookie.com/embed/{@data}?rel=0" frameborder="0" allowfullscreen="allowfullscreen">
<xsl:attribute name="width" select="if (@width) then @width else '600'"/>
<xsl:attribute name="height" select="if (@height) then @height else '450'"/>
<xsl:call-template name="commonAttributes"/>
<xsl:call-template name="namedAnchor"/>
</iframe>
</xsl:template>
In my case I am only interested in embedding videos for web based content, and for this reason adding the @audience
attribute is sufficient. But it would be easy to create an alternative output for printed media with perhaps a URL and the description text.