Video as Background in Streamlit App

[kenisthetic12]

Hi!

I’m trying displaying a particular video w/ Google Drive link (https://drive.google.com/uc?id=XXXXXXXXX) with application of st.markdown(). However, it looks like it doesn’t display the video as a background.

This is my code below:

#Set the page background
st.markdown(
“”"

.stApp {
background: url(‘https://drive.google.com/uc?id=“”“+bg_id+”“”’);
background-attachment: fixed;
background-size: cover;
}

“”",
unsafe_allow_html=True
)

the bg_id variable is the id of the Google Drive File. Is there any ways on integrating video as a background? Thanks!

[tonykip]

Hi @kenisthetic12,

Thanks for posting!

There was another similar question a while back here that explored the same question and had a working solution.

Here’s the code you can use:

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://drive.google.com/uc?id=enter_your_bg_id_here">
		  Your browser does not support HTML5 video.
		</video>
        """

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

st.markdown("This text is written on top of the background video! 😁")

Here’s a demo app that you can inspect the code for;