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.
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/
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.
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 :)