✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Using keywords in dash.iFrame

Hi everyone,

I have a requirement to embed a youtube video into the dashboard, with autoplay.

The embedding part works fine, following the example:

It works fine for the video I’m using, however I’m trying to generate this iframe (with allow="…" and allowfullscreen keywords so as to allow fullscreen and also autoplay)

What the raw HTML looks like is:

<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG” frameborder=“0” allow=“autoplay; encrypted-media” allowfullscreen></iframe>

However, I am not sure how to do that in Dash. When I try to do a

html.Iframe(src=“https://www.youtube.com/embed/videoseries?list=PLbWPytS1GWJI-kNj3pjhrt3quDGukru2H”, style=dict(border=0), width=“100%”, height=“800”, allow=“autoplay;”)

It errors out, no “allow” keyword.

What is the correct way to do this in Dash?


Sounds like a bug in dash-html-components, in that we’re missing those keywords. Could you create an issue in https://github.com/plotly/dash-html-components/?

Just connecting the dots:

refer to this issue: missing some attributes for `Iframe`? · Issue #77 · plotly/dash-html-components · GitHub