Scroll

How to add video to your Moto CMS 3 template

This guide will help you to add a video to your Moto CMS 3 page. In order to do that you will need to follow these steps:

1) Convert your video file to *.mp4 format.

2) Open your Moto CMS control panel and upload the video to your media library.

3) Select the file you have uploaded to Media Library and copy the path to that file from "File URL" text field. It should look like this:
/mt-content/uploads/2015/10/vid-banner-03.mp4

4) Replace path_to_your_file in code below with path you have copied in previous step.

<video autoplay="" loop="" height="100%" width="100%"><source src=".path_to_your_file" type="video/mp4"></video>

So your end result code should look like this -

<video autoplay="" loop="" height="100%" width="100%"><source src="./mt-content/uploads/2015/10/vid-banner-03.mp4" type="video/mp4"></video>

Please note that you will need to keep "." symbol before path_to_your_file in the code in order to make your video play properly.
Also you can modify your code to set up different behaviours for your video:

  • In order to add controls to your video (Play/pause button, progress bar etc.) please add controls="" code after <video part. For example your code will look like this:
    <video controls="" autoplay="" loop="" height="100%" width="100%"><source src=".path_to_your_file" type="video/mp4"></video>
  • You can stop your video from playing once your page is loaded by removing autoplay="" part from your code. In this case we recommend you you to add controls to your video from previous point so you will have a possibility to play your video manually.

  • You can remove repeat feature from your video by removing loop="" part from your code.

5) Now once you have created your custom code you will need to add "Embed" widget and paste your code to "Paste HTML Code" text field.

6) By performing all previous steps you have embedded a video to your page. Now you will be able to see the video on your page.

Have more questions? Submit a request

Comments

Powered by Zendesk