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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.