Home banner video background

Forked from @samuel33/hero-with-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.9k 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>

.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.2k
Background image section

Charlotte Dupont

3 years ago

20.2k
Typical SAAS hero section

Eamon Carter

3 years ago

9.8k
Hero with video background

Samuel Dawson

3 years ago

18k
hero section

Anonymous

3 years ago

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

Cosimo Fazio

2 years ago

7k
Background image section

Marc

2 years ago

7.5k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

BitWorks Tech

2 years ago

3.7k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Standard Hero

Anonymous

2 years ago

4.7k
DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

1.7k
L'art de coder
L'art de coderL'art de coder

Omer fils ELENGA

8 months ago

486