Home banner video background

Forked from @samuel33/hero-with-video-background

Home banner video background

This tailwind example is contributed by Rameez Rami, on 08-Dec-2023. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Rameez Rami

Tailwind v3.4 7.8k 12

Fork Fullscreen

bayay banner test
<section class="relative h-screen flex flex-col items-center justify-center text-center text-white ">
    <div class="video-docker absolute top-0 left-0 w-full h-full overflow-hidden">
        <video class="min-w-full min-h-full absolute object-cover"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
            type="video/mp4" autoplay muted loop></video>
    </div>
    <div class="video-content space-y-2 z-10">
        <h1 class="font-light text-6xl">full Hero Video</h1>
        <h3 class="font-light text-3xl">with TailwindCSS</h3>
    </div>
</section>

<style>
    .video-docker video {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.video-docker::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1;
    }
</style>

Related Examples

Hero section with a gradient background
With text overlay, and a call-to-action button

Anonymous

3 years ago

21.1k
Background image section

Charlotte Dupont

3 years ago

20.1k
Typical SAAS hero section

Eamon Carter

3 years ago

9.7k
Hero with video background

Samuel Dawson

3 years ago

17.8k
hero section

Anonymous

2 years ago

10.4k
Hero Banner
visually striking banner section It features pattern background with using SVG

Cosimo Fazio

2 years ago

6.9k
Background image section

Marc

2 years ago

7.3k
Login_Form
help to logging in

ineza aime stella

1 year ago

1.1k
Hero w/ navbar
the modern and clean hero section

Carla Hoffman

2 years ago

5.9k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Hero Section

Muzammil Riaz

2 months ago

193
pasta
by salvator

Baraka Salvator

1 year ago

1.3k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.