Background video to fill a screen

I'm attempting to make a Vimeo video a background video on a webpage in Bootstrap Studio. I've tried every stack overflow link I can dig up, pored over CodePen, and Google. I can't find anything that works for me.

Does anyone have an idea how to get it to work using BootStrap Studio in HTML with CSS. I'm open to JavaScript/jQuery, but I'd prefer to minimize it.

I've tried dumping an <iframe> onto the Overview panel with the following CSS rule:

<iframe id="myVideo" src="https://player.vimeo.com/video/123456789?title=0&byline=0&portrait=0"></iframe>

Here's my CSS rule:

#myVideo {
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
border: none;
z-index: -100;
}

The issue I'm encountering is the video doesn't fill the screen at all resolutions. It maintains the aspect ratio, but on smaller screens it shrinks, rather than fills the entire background.

Try this, as I was able to get it to work in the app etc... but the video element has to be custom code. https://slicejack.com/fullscreen-html5-video-background-css/

Saj

Thank you, Saj! That is substantial progress. The video disappears when it gets to SM/XS size. Any ideas around that?

The Author of the Article states "One more thing we should do is hide the video on mobile and just show the background image. This is because most mobile platforms won’t autoplay HTML5 video and will display it with an embedded play button on top of our content. In this example we will use the same image that is used for poster attribute in the video. Keep in mind that using display: none on the video element won’t prevent it from downloading."

It seems you just have to remove the media query rule where the display:none is.

@media (max-width: 767px) {
  .fullscreen-bg__video {
    display: none;
  }
}

Saj

Thank you, Saj! I had that in there, but one of the other rules specified an image I didn't have. I resolved it with a different background image. Thanks for getting me squared away :)

Your welcome, glad I could help. :)

Saj