I know you can do CSS, etc., to create a background video for a section, or container - but I’m wondering if the bootstrap studio interface allows you to do a background video through its interface?
It seems odd if it wouldn’t, but so far, I’m not able to find a way…
I’m interested in this topic, what exactly do you mean by video background?
Do you have an example of it to show.
Is this like a looping, moving area in the background behind the text on a page?
or a full animated video put on the website in an area.?
I planning on doing a animated HTML, Java, Gsap video and hope to put it in the top part of one of my sites here soon.
If I still have to make it, we’ll probably have A.I. make it.
I actually created a program for creating HTML, GSAP animations for video all with HTML. I’m going to work on adding features into my program so it could be changed from full HD or 4K size to more of a website size, And be auto-sizeable.
I have A.I. tied into it so I could use A.I. to create the animations, or I have a complete timeline that I can create items manually with keyframing, or edit any timeline with keyframing from any animation that the A.I. makes So I can change text color, change text, add more items I want to fly in, and so on..
In one of the new templates that they released, it has a star field in the background. I didn’t realize it at first, but that seems to be an animation background because it’s twinkling a little bit. I’m building a site based on that template I’ve started working on.
I got my local AI working in Bootstrap Studio last night using LLM Studio, and I’m running Swift Qwen 3.8 27B Splash version.
It was able to make all the changes that I asked it to do last night. quite quickly, all running local.
I tried the Qwen 3.8 27B splash version first. It was slower, the Swift version is by far better, faster, and figured things out better most of the time on the first try. the non-swift version. I was in three or four tries and sometimes it still wouldn’t get it.
Yes, instead of an image background (behind the text), it’s a video - pretty common actually.
There’s no way I’m aware of to do this through the BSS interface (like a drop-in background video component) but there are a few in the online library people have made. Unfortunately, most are BS4. I can’t vouch for how good they are. I generally avoid the online components because their quality is very hit and miss.
I did this background video using a few divs, some CSS and a couple of JS scripts. One pauses the video if the user scrolls the content past the point where the video is covered (saves battery consumption) and the other pauses the video if a modal is opened. It actually uses two different videos, one for desktop that’s a typical widescreen video and then one for mobile which is more of square. I don’t recall the exact resolutions I used.
There’s quite a bit of CSS to handle the various layouts at different screen sizes.
cracks knuckles
Ok, here is a simple website header with a video background created with no custom CSS or JS, using only Bootstrap 5 utlity classes and features. It is not perfect, however it works well with simple background videos and adapts to all screen sizes.
A sample video was used from Pexels.com, although this can be replaced with any video you wish to use.
Code:
<header class="position-relative pt-10 pb-10"><video class="object-fit-cover position-absolute top-0 start-0 z-n1 w-100 h-100" loop muted>
<source src="https://www.pexels.com/download/video/29109434/" type="video/webm" />
</video>
<div class="container">
<div class="row row-cols-1 row-cols-lg-2">
<div class="col">
<div class="text-light bg-dark bg-opacity-75 rounded shadow p-3">
<h1>Video Header</h1>
<p class="m-0">An awesome site header with a video!</p>
</div>
</div>
</div>
</div>
</header>
header when viewed:
Thank you! I will check this out!
