Inside the UI editor videos are another type of element that you can add onto the UI canvas. The purpose of the video element is as you have probably guessed to be able to add a video onto the UI canvas and consequently your future website.

How do you add a video into the UI canvas?
Unlike with the basic layout elements like blocks and columns there is an extra step in adding a video element as you must first upload a video to the asset library. Review the uploading to the asset library section of the how to prepare content for Peachworlds page to see everything with regards to uploading assets. Also don’t forget that we only support MP4 and MOV formats and the max file size is limited to 128mb. Also note that video controls will currently not work inside the UI editor and the poster will also be unviewable, but these things will work on the published website or in preview mode.
- Make the switch to the UI editor
- Click on the Add elements button in the top left corner
- On the pop up hover over the “Media” section to open another pop up
- On the new pop up you should see a “video” section with 2 elements
- Click on the “Video” element to be one step closer to adding a video into the UI editor
- Now the asset library will open as well as a placeholder video will appear. Click on a video file you have uploaded to the asset library OR click on the upload button in the top right corner of the asset library panel and then proceed to upload a video of your choosing.
- Once you click on a video in the asset library it will be uploaded onto the UI canvas and you can proceed to edit its size, position, style ect.
How do you edit video specific settings in the UI canvas?
Once you have added a video into the UI canvas there are some specific video only settings you can edit. To view these you must click on the added video element and then proceed to scroll down to the last section on the right-side inspector panel. These option include:

- The ability to add a video via URL
- Whether the video autoplays or not
- If a “poster” image is present before the video starts playing (autoplay must be disabled for this to work)
- Whether the video plays in a loop or not
- Whether the video plays without sound or not
- Whether the video player shows the controls or not