Hi everyone,
I’m running a Streamlit app on Hugging Face Spaces and I’m displaying short looping videos.
The issue is that on every loop reset, there’s a brief visible grey/shadow frame around the video before playback restarts. Because the clips are short, the reset becomes very noticeable and breaks the seamless effect.
I am using st.video(). The problem seems to happen during the browser/video element repaint between loops.
Environment:
Has anyone found a reliable way to make looping videos fully seamless in Streamlit/HF Spaces without the visible reset frame?
Thanks!
Welcome to the community and thanks for your thoughtful question! 
It could be possible that the visible grey/shadow frame during video looping with st.video() is due to how browsers repaint the video element between loops, and this isn’t something Streamlit directly controls. The Streamlit API for st.video() does support looping and autoplay, but it doesn’t provide low-level control over the video element’s rendering or buffering to guarantee a seamless loop—this is largely browser-dependent and can be especially noticeable with short clips, as you’ve described. According to the Streamlit st.video documentation, there are no parameters to tweak the loop transition or eliminate the repaint artifact.
Though I’m not entirely certain, it might be that using custom HTML/CSS via st.html() or st.markdown() to embed a <video> tag with additional CSS (e.g., hiding controls, forcing background color, or preloading) could help, but this approach is still subject to browser limitations and may not fully resolve the issue. There are also community discussions suggesting CSS tricks to hide controls, but not specifically to address seamless looping. If you have a minimum reproducible example, sharing it could help others in the community experiment and offer more targeted advice!
Sources: