plotly / dash-html-components

OBSOLETE - now part of https://github.com/plotly/dash
https://dash.plotly.com
Other
153 stars 49 forks source link

Add `allow` prop to html.Iframe #179

Closed AnnMarieW closed 3 years ago

AnnMarieW commented 3 years ago

This pull request fixes #77 "Missing some attributes for Iframe" by adding the allow and `referrerPolicy attributes.

Since this issue was created in 2018, several of the requested attributes have been depreciated, such as frameborder , scrolling, and allowfullscreen. The allowfullscreen attribute is considered a legacy attribute and redefined as allow="fullscreen"

Note that the autoplay and loop functionality requested in issue# 77 in can be achieved by adding parameters to the url as shown in the example below. Another solution might be to use the html.Video component.

Here is an example app to show how to add fullscreen, autoplay and loop to videos:

This app is based on this forum post Thanks for the nice example @nedned !

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(
    [
        html.Div(id="target"),
        dcc.Dropdown(
            id="dropdown",
            options=[
                {"label": "Video 1", "value": "video1"},
                {"label": "Video 2", "value": "video2"},
                {"label": "Video 3", "value": "video3"},
            ],
            value="video1",
        ),
    ]
)

@app.callback(Output("target", "children"), Input("dropdown", "value"))
def embed_iframe(value):
    videos = {
        "video1": "sea2K4AuPOk",
        "video2": "5BAthiN0htc?autoplay=1&mute=1",
        "video3": "e4ti2fCpXMI?playlist=e4ti2fCpXMI&loop=1",
    }
    return html.Iframe(
        src=f"https://www.youtube.com/embed/{videos[value]}", allow="fullscreen"
    )

if __name__ == "__main__":
    app.run_server(debug=True)
alexcjohnson commented 3 years ago

Thanks @AnnMarieW for kicking this off! I see one other attribute we might want to add to iframes right now, referrerPolicy.

Then perhaps it would be worthwhile to add a simple test in test_integration that these attributes show up in the DOM when you add them to an iframe?