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.
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!
For now, it will show as a blank black box in the Elements tab preview, as well as the Preview and Mobile Preview tabs.
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 (
After adding in the
src, a preview of the video should be shown instead of a black box.
If you go to the Preview or Mobile Preview, you should now be able to see your video element working on your card. Done!
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.