Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

How to embed video (e.g. YouTube) in Dashboard with Chart

I’ve got a dataset with an associated video. In this case the video is NOT the data, but is part of the documentation. Seems like this could be common: video of the dataset being recorded and you want to present a plot of the data with the video. Is it possible to combine the data chart and video in a Plotly dashboard?

I attempted the “Add a web page” dashboard option and linking to a YouTube website, but to no avail. Alternatively, I tried pasting the YouTube iframe embed code, but again that was not recognized.

Any advice in this regard would be appreciated!

Does anyone have experience on dashboards and videos? Any leads would be appreciated.

This doesn’t work right now, but a bug report has been submitted. Sorry for the inconvenience.

Thank you @jack for the update.

Nav, did you find a workaround?

I’m facing a similar challenge: need to publish both a .mp4 video and a few plotly charts in one online document. As I see from your post I should exclude plot.ly dashboard from consideration, at least for a while.

Apparently, PowerPoint Online should be able to do it, provided that one loads a video in PowerPoint classic first, but I didn’t try it yet (some issues with running PPT Online, but I think it’s due to my VSAT network; need to find an alternative internet connection around). Microsoft warns the video size should be under 50 Mb, that is suitable for my purpose.

Would be interested to learn about your ultimate solution.

@Kombat,

My work around was to:

  1. Upload video to YouTube, and use Share > Embed
  2. Add plot to Plotly and use Share > Embed
  3. Add both snippets of embed code into a html page or one that supports html snippets.

In both cases you get a snippet of <iframe> ...</iframe> which you can add to your website directly, if you have control of the html, or to a post on blogging platforms. Most will allow adding snippets of html code as such. I’ll share an example of the result I got from combining the video with the plotly graph:
Accelerometer Impact: Simple Task in, Rich Signal out
Hopefully you can do something similar.

Admittedly, I still would like to combine video and plot in Plotly dashboard for other applications. So I hope this does get resolved. @jack , do you have a reference to the issue which we could use to follow progress?

@hamid

Thanks. I agree your solution is the most reliable one.

I had a chance to test the PowerPoint option with D3.JS addin and can report as follows:

I have a rather uncommon internet connection via satellite (VSAT) at my current location. It is high speed but objectively long ping. In effect, for each query-response my signal needs to travel to the geostationary satellite 4 times: forth to sat from me – back from sat to an earth hub – forth from the earth hub to sat – back from sat to me. That means 36000 km * 4 = 144000 km or 0.5 sec at light speed. So my ping time objectively cannot be below 500 ms, although one way download/upload speed is high.

Such connectivity seems to represent a challenge for the PowerPoint addin that doesn’t work in both PowerPoint classic and PowerPoint online. They both work ok using an earth-based internet connection, in which I bet they were only tested by the developers.

However, a simple html file with embedded plotly iframe as you suggested shows and interacts perfectly well in my network conditions without problem.

One may argue my connectivity difficulties affect only a minority of users and can be ignored / deprioritized. However, just imagine an important business presentation with plotly objects to be presented to the Board on board a cruise ship that will fail since a cruise ship internet is sat-based by definition.

I liked your site layout a lot although I must admit I didn’t follow the physical sense.

Hey guys @hamid @Kombat - This should work now:

https://plot.ly/dashboard/jackp:17472/present

Thanks for your patience.

Thank you @jack for the update. I see your working example but can’t seem to get it working myself.

For example:

Dashboard > Add Webpage > Pasted URL from YouTube video

There was an error loading this webpage.
Make sure this website can be embedded

I also tried pasting the YouTube iframe code, but again the same result.

Can you explain how you created the working example?

@hamid Grab the URL that is inside the iframe src:

That should do it!

It works! Excellent - thank you @jack!