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.

Adding YouTube videos to your cards

1

Copy the YouTube embed links you would like to display in your cards visualization into a separate sheet. This isn't the YouTube video URL, but the link you can find within the YouTube embed code. It should look something like this: https://www.youtube.com/embed/mOjwhUcWpM4. 

2

Add a column to your datasheet in Flourish with the names and YouTube video links.

3

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 binding.

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. 

Your custom HTML code should look like (feel free to copy and adjust – you might need to update the column names in the curly brackets):

TIP: When referencing multi-word column names through curly brackets ({}), the template might throw an error. To avoid this, wrap your column name in square brackets like this: [Webinar topics].

6

That's it – you've successfully added a YouTube video to your Cards visualization!

Adding videos stored on your computer to your cards

1

Upload the videos you'd like to show in your card to a column. You can upload videos by right-clicking in a cell and selecting "Upload file".

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 binding.

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:

TIP: When referencing multi-word column names through curly brackets ({}), the template might throw an error. To avoid this, wrap your column name in square brackets like this: [Webinar topics].

6

That's it – you've successfully added a video to your Cards visualization!

How to add video as the background of cards

If you are wanting to add some nice videos or animation as the background of your cards, follow these steps! This works best for videos that you are uploading into the data tab.

1

Follow the same steps as above to upload your videos and switch on the Customise card HTML.

TIP: You can use GIFs and convert them to an MP4 to include into Flourish! CloudConvert is a great website for converting from GIF to MP4.

2

To import your videos into Flourish from your datasheet to the background of the cards, you will want to add two sections that will act as our containers for the text and videos to go into. Within the code for the videos, you will want to add your column name that includes the uploaded files.

3

Next, we will need to add some CSS to make our videos appear just how we need them to. We also added in the .callout styling a background color and set the opacity to 0.3, so that our text would stand out. You can change this to any RGBA you like!

There we go! You should now have videos in the background of your cards.