How to Create a Background Video In Bubble
In this Bubble.io tutorial video we demonstrate how to create a background video hero section using HTML that works on mobile.
Master full-width background videos: Learn the secret HTML snippet for responsive, eye-catching Bubble layouts.
Unlock pro-level Bubble design: Discover how to layer content over videos and create stunning hero sections without coding.
Transform your Bubble app's visual appeal: Step-by-step guide to implementing autoplay background videos that work across devices.
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.
Ready to Transform Your App Idea into Reality?
Access 3 courses, 400+ tutorials, and a vibrant community to support every step of your app-building journey.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 400+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Valued at $80
Valued at $85
Valued at $30
Valued at $110
Valued at $45
14-Day Money-Back Guarantee
We’re confident this bundle will transform your app development journey. But if you’re not satisfied within 14 days, we’ll refund your full investment—no questions asked.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
Not at all. Our courses are designed for beginners and guide you step-by-step in using Bubble to build powerful web apps—no coding required.
Forever. You’ll get lifetime access, so you can learn at your own pace and revisit materials anytime.
Our supportive community is here to help. Ask questions, get feedback, and learn from fellow no-coders who’ve been where you are now.
Absolutely. If you’re not satisfied within 14 days, just reach out, and we’ll issue a full refund. We stand by the value of our bundle.
Yes, this is a special limited-time offer. The regular price is $350, so take advantage of the discount while it lasts!