Set video as a background

Using Streamlit
1

Hi, how can I set MP4 video as a background in streamlit app?

There is a solution for setting image/gif as background (How do I use a background image on streamlit)
but no video.

Edit:

I’ve found solution for video with direct URL link.

import streamlit as st

st.set_page_config(layout="wide")

video_html = """
		<style>

		#myVideo {
		  position: fixed;
		  right: 0;
		  bottom: 0;
		  min-width: 100%; 
		  min-height: 100%;
		}

		.content {
		  position: fixed;
		  bottom: 0;
		  background: rgba(0, 0, 0, 0.5);
		  color: #f1f1f1;
		  width: 100%;
		  padding: 20px;
		}

		</style>	
		<video autoplay muted loop id="myVideo">
		  <source src="https://static.streamlit.io/examples/star.mp4")>
		  Your browser does not support HTML5 video.
		</video>
        """

st.markdown(video_html, unsafe_allow_html=True)
st.title('Video page')

Howerver, using local mp4 file as background is still a problem.

2

I suspect the answer is something like is outlined in this article:

http://www.iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri/

<video controls>
	<source type="video/mp4" src="data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29....../l/L+X8v5AAAAMgfDg==">
</video>

So for a local file, you’d need to convert it to base64 and put those bytes directly into the Streamlit page. Note, that if your video is large, this will have detrimental performance.

Best,
Randy

2 Likes
3

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