Creating 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, so thanks to everyone who's leaving comments and video requests. We read all of them and try to turn around a video response to a topic as quickly as we can.
Demonstrating the Background Video
Let me demonstrate what this looks like on the front end and show you the different components to it. The requirements that I've laid out are 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 we go along so hopefully you can copy it and build this up in your own app.
Setting Up the Page 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. That's important because it's going to allow me to place content on top of the video, which I'll demonstrate at the end of the video. Inside and positioned in the middle, I have an HTML element.
Configuring the 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. So make sure you set your padding to zero on the vertical and the horizontal.
Explaining the HTML Snippet
Let's dig into this HTML snippet and I'll explain each part to you. We have a video tag which opens here and closes there, and then within that, we have a source tag which opens and closes there.
Video Attributes
Working from the top, we've got "autoplay" which 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" (self-explanatory) and then "plays inline". In my experience, two of the key points here to getting your video to work well on mobile are the "muted" and the "plays inline" attributes.
iOS Considerations
I know from experience with iOS that "plays inline" - 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, if you have the battery saver mode activated, then actually Safari doesn't auto-play background videos.
Custom CSS for the Video
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. Just so 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.
Width and Z-Index
We've got the width 100% because I'm using the Bubble new responsive engine, my page's width is always going to be 100% of the browser window. 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, so I've given it a Z-index of -1.
Making the Video Responsive
Lastly, so that my video is responsive, I have added "object-fit: cover". This is to ensure that as my browser window changes to be fully responsive, if it was to stretch wider or higher, the video still fills all the space that I want it to. Because the video has an aspect ratio, 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.
Video Source and Type
We then have the source. Your video has to be in mp4 format. I've just linked through to a stock video website called Cover for this demonstration. Here is the source of that video file, and I placed it there. You could upload this to your own web hosting or to Bubble. This isn't going to work for a YouTube video. The 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.
Building a Hero Section
The real strength of doing it like this is that I can begin to build up a hero section here on my website. So I can have some welcome text, and I'll just center that and make it white. If I refresh, Bubble knows that the Z-index is going to be higher than -1, so that's why the text appears in front.
Creating a Group Section
If I wanted to build out more of 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. That then allows me to center that.
Final Touches
I could even go as far as clipping the background. I could go as far as setting it given that I wanted it to be dark anytime and then add some padding. Refresh that, and there you go.
Conclusion
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 you as quickly as possible.