Set video as a background

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.


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

import streamlit as st


video_html = """

		#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;

		<video autoplay muted loop id="myVideo">
		  <source src="")>
		  Your browser does not support HTML5 video.

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

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

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

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

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.