Video in fullscreen mode

Using Streamlit
1

Hello everyone,
I am relatively new to Streamlit and have a question/problem.

What I would like:
As soon as a button is clicked, a video should play in fullscreen mode and close again as soon as it’s over.

My problem:
Using the st.video function, the video is displayed relatively small and I have to start it manually. Another attempt via Java Script opens a window in fullscreen mode, but the file cannot be played.

What I have so far:
Here is the corresponding code section

    if st.button("BOT STARTEN"):
        # increasing clicks
        st.session_state.bot_clicks += 1
        save_click_count(st.session_state.bot_clicks)

        # start time session variable 
        st.session_state.start_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        
        # Video-URL
        video_url = "videos/test.mp4"  

        # try fullscreen 
        st.markdown(f"""
            <style>
            .fullscreen-video {{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 9999;
            }}
            </style>
            <div class="fullscreen-video">
                <video autoplay muted controls style="width: 100%; height: 100%; z-index: 9999;">
                    <source src="{video_url}" type="video/mp4">
                    Ihr Browser unterstützt das Video-Tag nicht.
                </video>
            </div>
            <script>
            document.querySelector('video').requestFullscreen();
            </script>
        """, unsafe_allow_html=True)

If anyone has any ideas for my specific use case, or perhaps even a solution, I would be very grateful!

2

Streamlit uses its own styles for elements. The z-index you set in the CSS might not be enough to bring the video element to the front for fullscreen mode.

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.