How to Create a Background Video In Bubble

In this video I demonstrate how to create a background video in Bubble. This is in response to a comment we've received on YouTube. Thanks to everyone who's leaving comments and video requests, we read all of them and we try and actually turn around a video response to a topic as quickly as we can.

Front-end demo

Let me demonstrate what this looks like on the front end, show you the different components to it. The requirements that I've laid out is that my video needs to be full width and also needs to be 100% of the viewport height.

I'm going to walk you through the code snippet that I've created and placed inside an HTML element and explain each part to you as you go along. Hopefully you can copy it and build this up in your own app.

Hero layout

Let's start at the top of the page. My page is using the new responsive engine and my layout is aligned to parent and that's important because that's going to allow me to place content on top of the video, which I'll demonstrate at the end of the video and then inside and position in the middle.

HTML element

I have got an HTML element. For some reason, when you create an HTML element, at least I find this Bubble applies some default padding, which will mean you can't get your edge to edge look. Make sure you say you are padding to zero on the vertical and the horizontal. And then let's dig into this HTML snippet and I'll explain each part to you.

HTML5 video tag

<video autoplay muted loop playsinline style="height: 100vh; width: 100%; z-index: -1; object-fit: cover; "> <source src="INSET YOUR VIDEO FILE'S HOSTED URL HERE" type="video/mp4"> </video>

We have got a video tag which opens here and closes there. And then within that we have a source tag which opens and closes there. Working from the top we've got auto play means that when the page loads, the video starts playing. We have muted so if the video has any sound it's by default set to mute, the browser picks that up, the video loops and then plays inline. And in my experience, two of the key points here to getting your video to work well on mobile is the muted and the plays inline. I know from experience with iOS that plays in line, you have to include this attribute here, otherwise the video won't auto play on iOS.

It's also worth mentioning when you test this that I believe again on iOS that if you have the battery saver mode activated, then actually Safari doesn't auto play background videos. Those are each of those attributes there.

CSS

We then have some custom CSS and I'll explain each part to you. The height is set to 100% of the viewport height. That's how I ensure my video goes all the way down. And just you're aware, because I have the Debug mode enabled, that explains the white gap at the bottom and it's also making space for this bar. Then we've got the width 100% because I'm using the Bubble new response engine my page's width is always going to be 100% of the browser window.

CSS: Z-Index

Z index if you imagine that your website or your web app is made of layers, different elements layered on top of each other, your Z index describes where in the hierarchy an element comes. Because this is a background, I want to ensure that nothing goes behind it and everything goes in front of it I've given it a Z index of minus one. Bubble handles most of this automatically.

If you were creating like a floating group for a header, but just for information, if you were wanting to, you're building it from scratch using HTML and CSS. Another example would be your header bar might be Z index 1000 to ensure that it floats on top of everything. But because I want this to be behind, I've made it Z index minus one.

CSS: Object fit

And then lastly, so that my video is responsive, I have added in here object fit cover. This is to ensure that as my browser windows, again to be fully responsive, if it was to stretch wider or higher, that the video still fills all the space that I want it to because the video has got an aspect ratio and I don't want the video to be squished or squeezed or stretched. In fact, when the viewport width changes, I want the video to be cropped rather than creating a white space or stretching or squeezing the video.

Source (src)

We then have source, and I should point this out at the start, your video has to be in well, in fact it be advised that you have uploaded your video somewhere in MP4 format. I've just linked through to a stock video website called Coverr for this demonstration, but here is the source of that video file. I placed it in there. You could upload this to your own web hosting or to Bubble.

This isn't going to work for a YouTube video. You can't this route here is the simplest approach than trying to put a YouTube embed and messing with the Z index there and having it autoplay.

Just have it that you've posted the video somewhere, whether on Bubble or like a hot link into a Dropbox or your own web hosting that you can link straight through to the source file.

Then last bit here is type. I'm declaring to the web browser the type of content and that it's video and it's MP4. The real strength of doing it like this is that I can begin to build up a hero section here on my website I can have some welcome text and I'll just send to that and make it white. And if I give that a refresh, yes, Bubble knows that the Z index is going to be higher than minus one.

That's why the text appears in front. If I wanted to build out a more of like a group section here. I've got align to parent, which means that any other elements that I add here are going to appear on top of each other. The way to get around that would be to create a group, like a column group here and then adjust the height and that then allows me to send to that.

Wrap up

I could even go as far as click on the background I could go as far as setting the background colour given that actually I want it to be dark and then some padding. Refresh that. I'm there you go.

Hopefully I've demonstrated the code snippet required to add a background video using HTML. I've explained why each part of it is required. If you've got any questions, please leave it in the comments and we'll get back to as quick as possible.