Video displayed based on a radio button action inside beta_expander does not close upon closing expander

🎈 Using Streamlit
1

Hi :wave:, I have a few videos to display based on a radio button selection inside beta_expander. Everything works great until I close the expander in which case the video is still visible right underneath the expander name. Can anyone show me how to “shrink” all actions related to the radio when the expander is closed? Thank you.

Edit: The only way I can have the video not be visible after the expander is closed is if I click on the “None” radio button first, then close the expander, which is not the feature I would like.

show_video = st.beta_expander(“Show Video”, False)
choice = show_tutorial.radio(“Select one tutorial”, [“None”, “Video1”, “Video2”])
if choice == “None”:
pass
if choice == “Video1”:’
video_file = open(my_file1, “rb”).read()
st.video(video_file)
if choice == “Video2”:
video_file = open(my_file2, “rb”).read()
st.video(video_file)

2

Hi @dashboard, happy to help! :grinning_face_with_smiling_eyes:

Just as you’ve done (correcting typo) with choice = show_video.radio(), the video files similarly need to be displayed within the beta_expander container. That is, st.video() should be replaced by show_video.video().

Here’s an example along with the desired output:

import streamlit as st

my_file1 = "video1.mp4"
my_file2 = "video2.mp4"

show_video = st.beta_expander("Show Video", False)
choice = show_video.radio("Select one tutorial", ["None", "Video1", "Video2"])

if choice == "None":
    pass

if choice == "Video1":
    video_file = open(my_file1, "rb").read()
    show_video.video(video_file)

if choice == "Video2":
    video_file = open(my_file2, "rb").read()
    show_video.video(video_file)

beta-expander-video
beta-expander-video2560×1440 3.91 MB

Let us know if this solves your problem :crossed_fingers:

Happy Streamlit-ing! :balloon:
Snehan

3

It did solve my problem! :balloon: Thank you!

As a follow-up question… I don’t mean to have a ‘None’ radio button but I don’t have a way to have a non-default radio button. Is it possible for the users to expand the expander and if no doing anything (ie no radio button is selected) then no video is displayed?

4

Hi @dashboard, you’re welcome! :slightly_smiling_face:

The st.radio widget always defaults to a preselected option on first render. As such, perhaps st.radio isn’t the best one to use in your use case.

Have you tried using st.checkbox? I’ve modified my earlier code snippet to use st.checkbox instead. By setting its value parameter to False, the checkbox will not be preselected when it first renders:

import streamlit as st

my_file1 = "video1.mp4"
my_file2 = "video2.mp4"

show_video = st.beta_expander("Show Video", False)
show_video.markdown("Select a tutorial")

choice_1 = show_video.checkbox("Video1", value=False)
choice_2 = show_video.checkbox("Video2", value=False)

if choice_1:
    video_file = open(my_file1, "rb").read()
    show_video.video(video_file)

if choice_2:
    video_file = open(my_file2, "rb").read()
    show_video.video(video_file)

Best, :balloon:
Snehan

5

Got it! Thank you so much!