DEV Community

Discussion on: Fullscreen Background Video WIth Text In HTML/CSS

Collapse
 
thomasverleye profile image
Thomas Verleye

Cool!
I would suggest a fallback for object-fit though. <video> with object-fit: cover; is not supported in older edge versions and some browsers do not support object-fit: cover; at all: caniuse.com/?search=object-fit

A simple @supports would solves the problem here:

.my-fancy-background-video {
    height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

@supports (object-fit: cover) {
    .my-fancy-background-video {
        height: 100vh;
        object-fit: cover;
    }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
w3hubs profile image
w3hubs.com • Edited

thank you @thomasverleye we will implement this and I think you used one class which is ".my-fancy-background-video " I think we should use flex properties to make text or content center. right :)