Add a Video Tile
- From the Tiled Builder, drag and drop the Video Tile onto the canvas.
- Resize and reposition the video tile.
- Add a video to the video tile. In the Properties Panel on the right-hand side, under Video Source you can either:
- Upload your video file (.mp4 or .mov) OR
- Enter a URL from YouTube, Vimeo etc. (*Be sure the URL begins with https://
- If you've already uploaded your video asset, you can simply drag your video onto the canvas OR drag it into the Video Source setting in the Properties Panel.
Note: To confirm that you have specified the correct asset or url, click the Preview button (play icon in the upper-right hand corner).
Video Settings
The Video settings in the Properties Panel on the right-hand side allows you to configure the following options for your video.
Position & Size
X, Y Coordinates and the Width x Height Pixel settings of your video.
Video Source
The source file (or URL) for your video tile that is set. You can delete your source video file from this file dropdown to update a new video - as well as adjust Fit vs. Fill and Opacity settings.
Video Properties
You can specify the following options for your video (see descriptions below)
|
Title |
Give your video a name to be displayed for alternative text |
|
Video Ends On |
Once your video playback has finished, set whether you'd like the video tile to end on the First Frame of the video, or the Last Frame |
|
Sound on |
Specify if the video should autoplay audio.
Note: To accommodate web browser requirements, you cannot configure your video to automatically play audio. The user must manually enable audio. |
|
Autoplay |
Specify whether you want the video to start on its own, or require that it is clicked to begin playback |
|
Loop |
Specify whether you want the video to loop, or replay continuously vs. playing just once. |
|
Completion Event |
Enable this option to automatically track when the video is watched |
Click Event
Specify how you'd like the video to react when clicked.
|
Do Nothing |
When selected, the viewer cannot interact with the video in the Video Tile. This is generally the go-to setting to configure a motion graphic that plays on its own. |
|
Play/Pause |
When selected, the viewer can click the Video Tile to play the video, and then click it a second time to pause the video. This option is selected by default. |
|
Fullscreen |
When selected, the viewer can click the Video Tile to enlarge the video so that it is as large as the microapp page. When finished viewing the video in full screen, they click the X icon in the upper left corner to return to standard view. |
Delete a Video Tile
To delete a Video Tile, ensure that the tile is selected and press the DELETE key.
You can also delete the video within the Video Tile by navigating to the Video Source setting in the Properties Panel and hitting the trash can icon.
Configure multiple videos to play simultaneously
You can leverage the video tile to create a highly interactive experience for your microapps by configuring multiple videos to play simultaneously.
Note: The mobile app supports auto-playing multiple videos, however, you may experience differences for video URLs depending on your device type (ios and android).
- Add more than one video tile to the same microapp page.
Note: Your videos can be a mix of uploaded video assets or URL links (Youtube and Vimeo) - Add an uploaded video or video URL link to your video tiles.
- Select the 'Autoplay' setting from the video flyout.
Note: You can also select additional settings and actions depending on your needs like 'Sound on'. - Preview your microapp to ensure your microapps are playing simultaneously (with or without sound).
Note: You can also have multiple videos playing on a page, page state, scroll tile, scroll state, or overlay.
Note: If you have single or multiple videos configured with sound, the browser will dictate whether the video will play with sound.
Note: While Tiled does not natively support audio, if you want to include an audio file in your microapp, you can do so by converting your audio file to a movie format and utilizing the Video Tile as detailed above.