DEV Community

loading...
Cover image for Fullscreen Background Video WIth Text In HTML/CSS

Fullscreen Background Video WIth Text In HTML/CSS

w3hubs profile image w3hubs.com ・1 min read

Fullscreen background video with text is the best user-interface for any kind of portfolio website or business website. Here we made this beautiful background video with a text interface with the help of HTML and CSS.

In this element we use one video in the background and also we used a heading tag to show in the center. Here we use flex display properties and also we used position properties to make this element properly perfect and attractive interfere.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

Discussion

pic
Editor guide
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 Author

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