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.
You can use a version control system such as Git with your Cards.