Adding embedded HTML frames (such as YouTube videos) to DITA WebHelp output

  1. Edit the DITA topic and insert a reference to the embedded object by using the Insert Media Object toolbar action or by manually adding an object element, as in one of the following examples:
    <object outputclass="iframe" data="https://www.youtube.com/embed/m_vv2s5Trn4"/>
    or, instead of the data attribute, you can specify the object using a parameter like this:
    <object outputclass="iframe">
    							<param name="src" value="http://www.youtube.com/embed/m_vv2s5Trn4"/>
    							</object>
  2. If you want the video to be allowed to play in full screen mode once the document is converted to XHTML output, also add an allowfullscreen parameter and set its value to true:
    <object outputclass="iframe" data="https://www.youtube.com/embed/m_vv2s5Trn4"/>
    						<param name="allowfullscreen" value="true"/>
    						</object>
    Tip: If you copy the embed code from the source and paste it into the Insert Media dialog box), the allowfullscreen parameter will automatically be added and all you have to do is set the value to true.
  3. Apply a DITA to WebHelp transformation to obtain the output.
    <iframe controls="controls" src="https://www.youtube.com/embed/m_vv2s5Trn4">
    						</iframe>

    For more information, see the following video demonstration:

The transformation converts the object element to an HTML5 iframe element.