How to add videos to your cards visualization

To add videos to your cards visualization, you'll have to use some custom HTML. Here's how to proceed.

    1
    Upload the videos you'd like to show in your card to a column or point to a link where they are being hosted. If you're using YouTube videos, we recommend you add the YouTube embed link (This is the link that will look something like this: https://www.youtube.com/embed/mOjwhUcWpM4) instead.   

    2
    Make sure to add your video column to be available to your visualization, by adding it to the "Select columns to visualise" area. We added it to the "Text" column bindings.

    3
    Next, go to the Cards settings and select "Customise card HTML". The content of your cards will disappear and some scary-looking custom card HTML will show up instead, but don't worry, we'll bring it back in just a minute.

    4
    What we want to do now is rename our image div to a video div and make it point to our video column by supplying the correct column title. Here's what this should look like (if you're using YouTube embed codes, you can jump to step 5):
    <div>
    <video controls width="320" height="240"> <source src="{{Video}}" type="video/mp4">
    </div>
    <div class="primary">
    <h1 class="title">{{Company}}</h1>
    </div>
    <div class="secondary">
    <h2>{{Industry}}</h2>
    </div>
    <div class="tertiary">
    <p>Market cap: {{Value}}</p>
    <p>Country: {{Country}}</p>
    </div>
    	
    5
    If you're using YouTube embed links in your data sheet, your data tab should look something like this:

    And here's what your custom HTML code should look like:
    <iframe width="320" height="240" src="{{video}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div>
    <h1>{{Company}}</h1>
    </div>
    <div>
    <h2>{{Industry}}</h2>
    </div>
    <div>
    <p>Market cap: {{Value}}</p>
    <p>Country: {{Country}}</p>
    </div>
    	
    6
    That's it – you've successfully added a video to your Cards visualization!