menu   UA Europe - Training & Consulting
UA Europe - Training & Consulting
UA Europe - Training & Consulting

Specialists in
User Assistance
& organisers of the
UA Europe Conference

Including videos in Flare’s HTML5 output

Published in ISTC Communicator, Summer 2017.

Introduction

In a previous article, I described how you can use MadCap Mimic to create MP4 video demonstrations. In this article, I explain the various ways in which you can incorporate these videos (or indeed any other video in a format supported by HTML5) into your Flare projects, and maximise the responsiveness and "findability" of these videos.

Including HTML5 videos into Flare

The first decision you have to make is where you are going to locate the video file. There are three options:

  • Locally hosted: within the Content folder of the Flare project so that it is included as one of the files published by the HTML5 target. The advantage is that the video is under your control and guaranteed to be available to the end user. In addition, this option is likely to result in the fastest page load time of the page containing the video.
  • On YouTube or Vimeo: a potential advantage is that both platforms automatically encode your video at various resolutions, which enables users to select their preferred resolution during playback. Also, an increasing number of Internet users choose to search YouTube for solutions to their problems, and posting your videos on YouTube will enable these users to find and view your videos directly (rather than be forced to launch them from your Help).
  • Web-based: at another Web location (for example, on your company's web server). Since this means that the video is potentially outside of your control, you will need to be confident that the video is available and that its URL is stable.

Top of page

Embedding a YouTube video

Flare provides an option for easily embedding YouTube videos, and takes care of the required HTML5 code in the output (which includes an iframe element within which the YouTube or Vimeo player is displayed).

You have the option of including width and height values. If you don't, Flare includes 560px x 315px by default. If you do choose to include your own values, make sure you specify both Width and Height, and that these two figures are in the ratio 16:9. If you set the Height to Auto, the height does not adjust automatically to maintain the aspect ratio of the image. Instead, the browser defaults to a height of 150px, and the image appears squashed.

If you are using Flare's Tripane-based HTML5 output, you will find that the full screen option is not available in the player. A fix for this is available on the MadCap Forum.

Embedding a locally hosted video

Embedding a local video is easy, and a standard skin for playing the video is provided by the end user's browser. Flare provides various options for customising this skin.

Screenshot showing player customisation options

You can also embed a web-based video, although the way of specify the URL of the video using the Insert Multimedia dialog box is somewhat counter-intuitive: you have to select Multimedia in project (Multimedia from Web is only for YouTube or Vimeo videos) then copy and paste the full URL (including http://) into the address field below this option.

Screenshot showing pasting URL of a web-based video

Linking to a web-based or local video

I sometimes choose to link from a thumbnail image — this can be a useful way to minimise the space that the video takes up within a topic. If using a Tripane skin, I would recommend linking into a popup window that users can easily dismiss by clicking outside the popup. I also recommend linking directly to the MP4 file (rather than to a topic containing the video), which means that the video is displayed on a black background, centred in the popup, and (most importantly) auto-sized to fit both vertically and horizontally within the pop-up window.

If you are using Flare's Topnav HTML5 skin, then a popup window is not available to you. Instead, I recommend linking to a topic containing the video, and also including a Back link within the topic.

Using the Mimic Movie option

If you are inserting a MadCap Mimic Movie into Flare, you can use the dedicated Multimedia > Mimic Movie option available from the Insert ribbon. The file that you reference from this option is the source (.mimov) file, which means that the actual video (.mp4 or .webm) file needs to be generated by Mimic each time you build your Flare target. As a result, the overall build process can take significantly longer to complete, and it will not be possible to take advantage of the server-side build capability of MadCap Central (since the server would not have access to the source Mimic project). For this reason, I recommend building from Mimic and then linking to the resulting .mp4 or .webm file from Flare using the techniques described in the preceding sections.

Making videos responsive

We want videos to adapt fluidly to the space available within the containing window. You can achieve this for local or web-based videos by setting the maximum width of the video element as a percentage of the available width. Note that, even though an object tag is used within the XML code of the source topic, the generated HTML5 topic uses the video element, so the code you need to include in your style sheet is of this form:

video
{
max-width: 100%;
}

Searchable videos

Search will target the text in the topic within which the video is embedded or linked. Make sure you use the word "video". You can also add Index Keywords and a Topic Description that will be targeted by Flare's own search (though not by Google).

Top of page

Call to action

Why not use some of the techniques described in this column to incorporate video demonstrations within your user assistance? You are likely to broaden the appeal of your content, especially amongst the Millennial generation of your users.

Further information