Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

Add allow prop to html.Iframe #179

Merged
merged 5 commits into from
Feb 11, 2021
Merged

Conversation

AnnMarieW
Copy link

@AnnMarieW AnnMarieW commented Feb 6, 2021

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:

  • All three video now have the option to play in fullscreen by using the new allow attribute: allow="fullscreen"
  • The second video is set to autoplay by adding ?autoplay=1&mute=1' to the video id
  • The third video loops by adding the playlist={video id}&loop=1 to the video id like this:
    ?playlist=e4ti2fCpXMI&loop=1

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
Copy link
Collaborator

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?

Copy link
Collaborator

@alexcjohnson alexcjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great! Nice simple test addition. Let's add a changelog entry - which will hopefully rerun tests with the latest dash dev branch to fix the Py3.6 tests... then this should be good to go! 💃

I think this covers everything we want from #77, so I'd change the lead comment to say "fixes" or "closes" rather than "addresses" and this PR will auto-close #77 🎉

CHANGELOG.md Outdated Show resolved Hide resolved
@alexcjohnson alexcjohnson merged commit b2b6b2c into plotly:dev Feb 11, 2021
@AnnMarieW AnnMarieW deleted the add-allow-prop-77 branch February 11, 2021 17:10
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

missing some attributes for Iframe?
3 participants