Video background hero section

Bootstrap Studio Help
1

Hi

Whats the best way to add a looping video (mp4) to the background of my hero section?

Thanks

2

Here is an example

1 Like
3

You need a place online where you can host your video file. You can’t upload videos to Bootstrap Studio’s free hosting. So any place that will allow you to stream. Youtube, Vemeo, (maybe Google Drive or Dropbox.) Best is having your own hosting on a fast web server. That works well.

Now you need a little CSS…

.video-wrapper {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
min-width: 991.99px;
height: auto;
overflow-x: hidden;
z-index: -999;
}

position: absolute will allow your video to scroll off the page as you scroll down. If you want the video to stay fixed, use position: fixed and then your content will scroll over it. The min-width: 991.99px; means that the video will scale down proportionately until it hits the MD break point, and then it will get cropped on both sides. You can change this value to whatever you want. If you prefer for the video to keep getting smaller, make it something like 300px, which will let it scale all the way down to phone screens.

Now to make it show up on your page, add a Div before your Hero Section and give that Div the CSS class I created (for this example, I used .video-wrapper as the name of my CSS class)

Now you can either add a custom code component inside your DIv and write your own HTML, or you can use the Bootstrap Video component inside your div, and set the parameters from the Option Panel.

With custom code and your own hosted video, it would look something like this…

<video autoplay muted loop playsinline preload="auto">
  <source src="https://yourdomain.com/yourvideo.mp4" type="video/mp4">
</video>

If you use the Video Component and your own hosted video, you’d probably do something like..
Type: HTML5
Width: 100%
Height: auto
Preload: Auto
Poster URL: (will be whatever you choose)
Autoplay: On
Loop: On
Muted: On
Show Controls: OFF

Video Sources
Mime Type: video/mp4
Source: https://https://yourdomain.com/yourvideo.mp4

I prepare my videos in Handbrake and check the web box so they are optimized for the web (meaning they’ll start playing immediately while the rest of the video is being downloaded. If you don’t want a blank screen until the video starts to download, grab the first frame as an image, and use that as your poster.