Why is my embedded YouTube video on my transcription app showing up with a vertical scroll in the column?

[Odrec]

I am making this simple transcription app and everything is working pretty well except for the display of the YouTube video. When the transcription is done the app shows the user the uploaded video or audio (both of these show correctly) or the YouTube video next to the transcription.

The YouTube video shows up with a vertical scroll instead of showing the entire video inside the column. Anyone knows how could I fix this?

This is a screenshot as to how the video appears cut below

This is basically the part of the code where I display the media and the display of the uploaded video or audio has no issues. Only YouTube videos:

    with media_col:

        if st.session_state.media_file_data:
            ext = os.path.splitext(st.session_state.original_file_name)[1].lower()

            if st.session_state.input_type == "Upload File":
                if ext in ['.mp3', '.wav']:
                    st.audio(st.session_state.media_file_data)
                elif ext in ['.mp4']:
                    st.video(st.session_state.media_file_data)
            else:
                st.video(st.session_state.youtube_link)

[blackary]

I don’t see any obvious reason in your code. I do notice that your screenshot doesn’t quite match the code in your current app, because the left column is wider than the right, but the code shows the opposite transcription-whisper/app.py at main · Odrec/transcription-whisper · GitHub That’s probably not related, but just in case.

One thing you could try playing with is explicitly creating a container with a fixed height, and see if that helps:

with media_col.container(height=1000):

[Odrec]

@blackary

height=1000

Oh that’s because I didn’t make the screenshot of the entire app cause I was in a very big monitor. But it’s the same code.

But setting the container height worked! So how come the container height was so small before?

Anyways thanks a lot!

[blackary]

I’m not sure why the container height was so small, to be honest

[Odrec]

I’m speculating here but the documentation of containers says that they set the height based on the height of the components they hold but maybe streamlit has issues getting the height of a video from YouTube? Just a guess

[blackary]

Yeah, I’m not sure – the height seemed fine in my simple demo app that I tried, so I’m not sure why it’s so short for your example.