Fullscreen Background Video WIth Text In HTML/CSS

#html #css #weeklyui #uiweekly

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

Top comments (2)

Thomas Verleye • Nov 8 '20

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;
    }
}

w3hubs.com • Nov 16 '20 • 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 :)

DEV Community

Fullscreen Background Video WIth Text In HTML/CSS

Top comments (2)

Read next

Google UI Clone in HTML and Tailwind CSS

SASS is dead? CSS vs SASS 2024

Web Based MMO RPG

Harnessing the Power of CSS Counters