Using the Card Designer

4. Create a video Card

Over the next few pages we are going to create three distinctly different Cards, beginning with a simple video Card that displays a video from YouTube below.

If you have followed the steps to add a Card and open it in the Designer you can start below.

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.

The aspect ratio that the vide is shown at. `Default: 16:9`
How long after user interaction before the video controls hide. Value in milliseconds. `Default: 1000`
If enabled, the video will start to play once loaded. `Default: False`
If enabled, will show the video controls. `Default: False`
The time that the video starts at. `Default: 0`
Force the video to have a certain height. Use any valid CSS units. `Default: auto`
If enabled, the video will loop to the start after finishing. `Default: False`
If enabled, the video sound will be muted. `Default: False`
The id of the element in the schema. Autogenerated by default.
If enabled, the video will preload instead of being streamed. `Default: False`
The src link for the video. Must be a link to an HTML video element supported format (MP4, Ogg, or WebM). `Default: blank`
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`
The default volume for the video. An integer value between 0-100 (inclusive). `Default: 100`
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`
The width of the entire Card element. `Default: Wide`
CSS Style
Inline CSS styles for the element. `Default: blank`

You can use a version control system such as Git with your Cards.