Add Videos to a Page

Add a Youtube or External Video

1. Go to the Content Management module and access the Content tab of the page within which you would like to display the video.

2. You will then be presented with the "Editor" window (as displayed below). You can add the text that you may need on the page and then switch to the "Source" mode of the editor.

3. Open the page with the video on www.youtube.com or any other video site that has the option to embed videos. Copy the code displayed in the "Embed" field.

4. Paste the code from Youtube within the source code where you want the video to appear. If you don't understand source code, go to WYSIWYG mode, and type some text like "First video comes here" where you want the video to appear. Then switch back to source code and find this text "First video comes here" in the source code. Remove the text with the copied embed code from Youtube.

5. Click the "Publish to Live" button.

The Youtube video should be displayed on your webpage.

Add Your Own .mp4 Video With H.264 Codec

For this option, your video must be in the .mp4 format and use H.264 codec. If you are not sure of the codec, please use the option below.

Here are the steps to add the videos to a page through this option:

1. Open "File Manager" Module and upload your video (for example, into the "Video" folder). 

​

2. Open the page in the "Content Management" Module, that you want to place video to.

Open "Content" tab in source view and place the follwing tag:

<sys:player title="My Video" data="/data/Video/example-video.mp4" width="425" height="40" autoplay="0"/>

Replace attributes' values with your own:
- "title" is for name of the video
- "data" is for path, where you placed your video in file manager
- "width" is width of the video
- "autoplay" - "0" - don't play automatically, "1" - play automatically, when page is loaded.         

Add Your Own .mp4 Video With Any Codec

This option is helpful for videos when the videos do not use the H.264 codec that is required by the system. This player supports responsive layouts and also resolves any potential codec issues. To use this option, open the WYSIWYG editor and choose the "Widgets" option in the editor:

You will see a list of widgets, choose the one highlighted below: Common Tags > Widget > Click the + icon

It will open a popup layer like the one below, where you will need to choose the "Player Type" - MediaElement Player:

Select the video file from where it's located in the File Manager module. If it's not there, you can upload it to file manager before selecting the file.

Preview Picture - This is a REQUIRED field only if you wish to have the video show in a popup. If you want to have the video play in its own container, then you can skip uploading a preview picture - the system will take the first frame of the video and use that as the preview picture.

The other options are optional:

Aspect Ratio - leave this field alone as it will automtaically detect the aspect ratio.

Show in Pop Up - When turuned off, it uses the settings specified under Width and Float to specify the location and size of the player. It will open the video in a popup when checked. This option makes the "Float" and "Width" options void when checked.

Width - you may specify the width of the player if you'd like it to be of a specific width when the "Show in Pop Up" option is turned off, otherwise the preview size should be 720x500 and the video will show in a centered popup with the size 277x155. The height is calculated automatically by the system.

Float - this setting is only used when the 'show in pop up' option is turned off; left - aligns the video to the left of the screen; center - makes the video and preview image go full screen; right - places the video to the right of the screen

Auto Play - can be set to Yes or No. We suggest "No" to avoid unnecessary data usage on mobile devices.

Subtitles - .srt files may be added to add subtitles to the video.