UPDATE: the video of the EURO 2017 final is no longer available but this visualisation on Tableau Public uses the same method.
Last August, the Dutch team won UEFA Women’s EURO 2017 against Denmark. As a client asked us how he can make his viz interacting with a video in Tableau, I thought it was a good occasion to use the data from the match to explain how to create this kind of viz in Tableau.
So following the blog post of my colleague Martijn Verstrepen, I created this simple viz where you can click on a ball and see the corresponding goal.
[tableau url=”https://public.tableau.com/views/Finale-NL-DK17/EURO17fl?:embed=y&:display_count=yes” width=”800px” height=”900px”][/tableau]
How to link data to a Youtube video?
1 In the spreadsheet containing the match data, I added a column named ’seconds Youtube’ corresponding of seconds of the action in the Youtube video (the goal in this case).
2 In Tableau, I created a simple dot plot representing each goal occurred during this match. To use the field of video seconds within the URL action (that I will explain below), it needs to be within the view, so I dropped it onto the details.
3 Now we have to find the embedded URL of the Youtube video
On Youtube, go to the bottom of the video, choose ‘Share’ then ’Integrate’ and copy paste the URL between quotes.
4 After creating a dashboard with this sheet, the next step is to add a dashboard action. In the dashboard menu, select ‘Action’ then add a new ‘URL Action’. Then you paste the link to the video into this URL section and define the parameter of the video.
- The URL looks like this: https://www.youtube.com/embed/sJLoV4erC9w?autoplay=0&controls=0&modestbranding=1&vq=hd720&start=<Seconds youtube>
- In this case, I chose these Youtube settings:
?autoplay=1&controls=0&modestbranding=1&vq=hd720&start=<Seconds youtube> - ‘start=‘ is the parameter which will allow the video to start at a specific time in seconds (in this case the seconds from my field ‘Seconds youtube’ )
- You can find more information about these parameters here
5 In the URL section, you can define the parameter of time by using the little arrow on the right. You can choose which field you wish to set the seconds of the video, Seconds youtube for this example.
6 The last step is dropping a web page into the dashboard and give the URL used above.
Now, I can select a goal, and it will load within the web page and jump to the correct seconds of the goal!
The Youtube video won’t work on Tableau Desktop, it’s normal, you need to publish it on Tableau Server or Tableau Public