Making a video Card

Now we want to create a card that shows a video to the user.

Adding a video container

The Liquid View element is put on our card by default, based on the template we chose in Adding a New Card. This card is more useful for displaying data in a custom format, but in the case of a video there is a more suitable element we want to use instead.

So let's to remove the existing Liquid View element. Do this by navigating to the Elements tab, selecting the Liquid View element from within the Card preview on the right. It is selected when it is highlighted in green.

Then click the gray remove button at the bottom of the page.

Now, we need to go to the Add Elements tab. Here, we can drag the Video element from the left hand list, onto to the card. Make sure to place it below the title!

Video Card Element

For now, it will show as a blank black box in the Elements tab preview, as well as the Preview and Mobile Preview tabs.

Video element settings

Now we are going to modify the settings of the element so we get the functionality we want.

For a complete breakdown of the video players settings, see the properties below.

Make your way to the Elements tab.

First, lets click the checkbox for controls. This will enable video player controls for our video element, allowing the user to play, pause, and make the video fullscreen. You will see this get reflected in the preview on the right.

By default, the controls will autohide after one second. You can adjust this time with the autohideControls setting, which is the time in milliseconds.

Next, we need to set the video source. This is the src setting. You can put a link to any video format that is supported by HTML5 (MP4, Ogg or WebM).

After adding in the src, a preview of the video should be shown instead of a black box.

Card Video Playing

If you go to the Preview or Mobile Preview, you should now be able to see your video element working on your card. Done!

Video element properties

These are the attributes for the Video elements which you can change from the "Elements" tab.

aspectRatio
The aspect ratio that the vide is shown at. Default: 16:9
autohideControls
How long after user interaction before the video controls hide. Value in milliseconds. Default: 1000
autoplay
If enabled, the video will start to play once loaded. Default: False
controls
If enabled, will show the video controls. Default: False
currentTime
The time that the video starts at. Default: 0
height
Force the video to have a certain height. Use any valid CSS units. Default: auto
loop
If enabled, the video will loop to the start after finishing. Default: False
muted
If enabled, the video sound will be muted. Default: False
Name
The id of the element in the schema. Autogenerated by default.
preload
If enabled, the video will preload instead of being streamed. Default: False
src
The src link for the video. Must be a link to an HTML video element supported format (MP4, Ogg, or WebM). Default: blank
thumbnail
A link to an image that will be shown as the video thumbnail. If blank, the video thumbnail will be generated from the video. Default: blank
videoVolume
The default volume for the video. An integer value between 0-100 (inclusive). Default: 100
width
Force the video to have a certain width. Use any valid CSS units. Default: auto
CSS Class
CSS class names that will be injected into the element. Default: blank
Width
The width of the entire Card element. Default: Wide
CSS Style
Inline CSS styles for the element. Default: blank

Using Version Control

You can use a version control system such as Git with your created cards. You can find more about how to do so here.

Last updated: Sun 01 Oct, 2017