Add allow prop to html.Iframe

[AnnMarieW]

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]

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?

[alexcjohnson]

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 🎉

[AnnMarieW]

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]

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?

[alexcjohnson]

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 🎉

[AnnMarieW]

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]

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?

[alexcjohnson]

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 🎉

[AnnMarieW]

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]

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?

[alexcjohnson]

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 🎉

[AnnMarieW]

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]

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?

[alexcjohnson]

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 🎉

[AnnMarieW]

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]

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?

[alexcjohnson]

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 🎉

[AnnMarieW]

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]

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?

[alexcjohnson]

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 🎉

[AnnMarieW]

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]

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?

[alexcjohnson]

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 🎉