Video as Background in Streamlit App


I’m trying displaying a particular video w/ Google Drive link ( 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

.stApp {
background: url(‘“”“+bg_id+”“”’);
background-attachment: fixed;
background-size: cover;


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

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


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')

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

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

1 Like

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