On-page video playback

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.

Using video files from the Media section

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

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.

Create a media folder

Enter a name for the folder and click Save.

Enter folder name

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

Uploading video file

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:

Video folder example

 

Insert the Video macro into your page

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

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

Select video macro slide out panel

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

Input video macro details slide out panel

The following options are available:

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.
 

Embedding YouTube/Vimeo videos

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”.

Embed YouTube or Vimeo video into the rich text editor

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.

Edit the source code pixel width and height

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

Home page video

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

Free
demo