I’ve always been a fan of combining images, videos, etc. along with data to help tell a better story. I usually start with a good image a design using that inspiration (i.e. colors, style, etc.) I think if media content is used in the correct way it can draw a user in to view your work, but also can enhance the overall user experience.
One way to do that is by using relevant content from YouTube for example. Here are some tips for making this experience even better using a fun example.
I listen to a lot of music throughout the day and I am currently on a Twenty One Pilots kick. Let’s say I want to visualize some data about the band. I cannot assume everyone has ever heard their music. Wouldn’t it be very appropriate and enhance my story of album sales and popular songs by including an image of the band and a video of one or more of their songs? I think you come away from my end product below with a better feel for the band, their music, and why they are so popular. I don’t think the same can be said had I just included a line chart of album sales and called it a day.
So let’s talk about how to enhance YouTube embedding in Tableau. I went to YouTube and copied the embed URL, not the share URL. This will give you just the video without the YouTube wrapper and other junk.
Add a web page object to your dashboard and set the URL.
This looks Ok, but it could be better. Here is a list of YouTube parameters. Let’s add ‘?showinfo=0’ to the end of the URL. This will drop the title and text above the video.
Now let’s hide the controls. The giant play button in the middle of the image is enough isn’t it? Add ‘&autohide=1’ to the end of the URL. You use the ‘&’ instead of ‘?’ because it is the second parameter being passed.
Look at how much more seamless this looks! Nice. Now, I can setup a URL action adding these parameters to the end of my URLs.
Here are a few more of my favorite URL parameters. In the middle of the song, the boys do a secret handshake. Let’s say you want to start the video right after that and just show the hook. Add ‘&start=56&end=80’ to the end of the URL, where 56 and 80 are in seconds. This can be used to trim things off the start and end of a video. I used this in my second #IronViz entry this year to make more focused use of news media to help tell my story. Hit play below to see the effect on the music video.
Here are a few more things to keep in mind when designing for mobile devices. The first one is huge, any video or audio embedded in your dashboard will open a full screen experience on a phone. This means you can embed a very small video on your dashboard (like the above 200px x 200px example) because it won’t be viewed in that small space. It is really just a play button on mobile. The second is parameters like autoplay do not work on mobile devices. This has to do with the design of mobile operating systems to limit data usage. So always test the experience before publishing.
I hope these were helpful tips. Here is my Twenty One Pilots viz.