Play a video, by picking it's ID in a dropdown

Dash Python
1

I have a df as such:

ID        Youtube_Link     Youtube_ID
A             x.com                xyz
B             x.com                xyz
C             x.com                xyz

I’m trying to create video player in my Dash app that responds to a dropdown list. For example, selecting ID = A will play the following video link from the df.

Although the dropdown selection is the next step, as I’m having trouble even playing even a static link using html.Video(src = x.com, width = 'x'

Getting a youtube link working as a html.Video component, as well as created a dropdown functionality is my goal here. Any thoughts?

2

Try using an IFrame:

html.Iframe(src="https://www.youtube.com/embed/tgbNymZ7vqY")

Then change the src with a callback on the dropdown

app.layout = html.Div(
    [dcc.Dropdown(id='options', options=[{'label': 'Rapsody', 'value': 1}, {'label': 'Alone', 'value': 2}]),
    html.Iframe(id='frame', src=None)]
)


@app.callback(Output('frame', 'src'),
              [Input('options', 'value')])
def change_video(option):
    if option == 1:
        return 'https://www.youtube.com/embed/tgbNymZ7vqY'
    else:
        return 'https://www.youtube.com/embed/ALZHF5UqnU4'
3

Right on the money, thanks.