Videos can be placed onto content pages to assist with guidelines and brand messaging.

Videos can be embedded from video files stored in the Media section or from streaming services such as YouTube or Vimeo.

• Inserting videos stored in the Media section
• Embedding YouTube/Vimeo videos

^^ Our default video player utilises HTML5 <video> playback. It is W3C compliant and works across the following browsers by default:

• Chrome 4.0+
• Internet Explorer 9.0+
• Firefox 3.5+
• Safari 4.0+
• Opera 10.5+ (25.0+ needed to play MP4)

Note that you only need to upload a MP4 video for most of the newer browsers. However, if your users generally work with older browsers, you also need to upload a OGG video file format.

Upload video to the Media section

As it is a video for explanation purposes only, and NOT a video asset for download from the Asset library, the video should be added to the “Guideline display visuals” folder of the Media section.

Contain the video in its own folder by creating a “Folder” in the Media section.

Hover over the Guideline display visuals page name (or any folder within) in the Media tree view, click on the options icon (•••) and click the Folder option in the Create menu.

Enter a name for the folder and click Save.

Then drag ‘n’ drop the video file into the new folder. Choose Video when prompted in the Choose media type slide out panel.

Note that you only need to upload a MP4 video^^ for most of the newer browsers. However, if your users generally work with older browsers, you also need to upload a OGG video file format.

Poster image (optional)

The browser will display the first frame of the video as the preview image. However, if you want to display a different poster image when the video first appears on the page, then upload a JPG or PNG at the same size as the video, and mark it as an Image file type when uploading.

A video folder with videos and a poster image should look like this:

 

In the rich text editor, place your cursor at the desired content insertion point, then select the Insert macro button  in the tool palette.

Select the Video macro to reveal the video macro properties...

Next, select the Media Folder which contains the video and optional poster image:

The following options are available:

• Autoplay: Specifies that the video will start playing as soon as it is ready. Note that due to recent changes in all major browser policies, the video will not autoplay unless it is also muted.
• Loop: Specifies that the video will start over again, every time it is finished.
• Muted: Specifies that the audio output of the video should be muted.
• Disable Download: Hides the download icon in the video controls list.
• Video Width: The video should automatically resize to the column or table cell width. Therefore, only enter a video width in pixels (whole numbers only) if wanting to downsize the video within the column or table cell. Note that if the video does not automatically resize, enter a value here to force the resize.

Once you’ve linked to the Media Folder and made your selections, click on Submit and Save and publish the page to view your video.
 

To embed video from streaming sites such as YouTube or Vimeo, insert the cursor into the rich text editor window and select the “Embed” icon.

The Embed dialog box appears. Enter the Url copied from YouTube/Vimeo and click “Retrieve”.

Before submitting, ensure Constrain is selected and adjust the pixel Width. Note that you only need to adjust the width if constrain is ticked (the height will adjust accordingly). In most cases, you would enter the Brand Toolbox column width of 630px.

Note that in some cases, and depending on the video aspect ratio, the video may reduce smaller than 630px. If this occurs, select the video and click the “Source code” icon to adjust the video size.

Within the source code dialog, adjust the <iframe> “width” and “height” (whole numbers only) and click OK.
 

To learn how to add a video to a Home page, view the Home page video page.