Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Dash layout - add video as background?

Hi all!

Is it possible to have a layout with a video displayed in the background with some transparency?

something like when adding a background color in the style feature of a html.Div([ ], style={ XXXXX: XXXXX})?

Hi @monitorcasalab

Check out this post: Just finished my Dash project; this forum helped a lot, let me know if you're curious about anything I did/how I achieved it @jon_peter did a nice job on this app!

And be sure to check out the site: http://glacierpointdata.com/ That opening scene makes me want to take a hike :sun_with_face:

2 Likes

Thank you for your kind comment @AnnMarieW!

@monitorcasalab I’ve attached some snippets of my code below where I got the background as a video.

	home_page = html.Div([
					html.Video(id='bgvideo',src='https://npparkdata.s3.us-east-2.amazonaws.com/assets/Pexels+Videos+1448735.mp4',
								autoPlay='autoPlay',loop='loop',muted='muted')])

Unsure of how other users went about it, but I just use an S3 bucket to store the video and source it directly from there. You can also do this via google drive or many other ways.

Hopefully this helps.

2 Likes

Fantastic!!!, thank you @jon_peter and @AnnMarieW. Jon, your video and layout is pretty impressive