Tailwind CSS full-screen video header
Tags: css
Published: 2020-12-19 03:41:15

Call me old-school, but I love to see video headers. Hardly do I have a use for them on my personal website, but I love to implement a video header for clients with stunning videos.

Today I wanted to see how easy this could be done with no custom CSS. We are only going to use the classes [Tailwind CSS](https://daily-dev-tips.com/posts/my-first-experiences-with-tailwind-css/) gives us.

The end result is this stunning full-screen video header using only Tailwind CSS.

![video-header.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1607940108457/esNeCkquB.gif)

## Tailwind CSS full-screen video header

To create this header, we are leveraging yesterday's [Tailwind parallax header](https://daily-dev-tips.com/posts/tailwind-css-parallax-effect/). It has a very similar setup, only now we don't make it parallax scroll.

The basic `HTML` structure will look like this:

```html
<header>
  <div>
    Welcome to my site!
  </div>
  <video autoplay loop muted>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
  </video>
</header>
```

You can see we used a header tag. In there, we have a div that will hold a block that will sit on top of the video.
Then we have a video tag, which can hold one or multiple sources.

I will now write down the end `HTML` structure and then go through the importance of each class.

```html
<header class="relative flex items-center justify-center h-screen mb-12 overflow-hidden">
  <div
    class="relative z-30 p-5 text-2xl text-white bg-purple-300 bg-opacity-50 rounded-xl"
  >
    Welcome to my site!
  </div>
  <video
    autoplay
    loop
    muted
    class="absolute z-10 w-auto min-w-full min-h-full max-w-none"
  >
    <source
      src="https://assets.mixkit.co/videos/preview/mixkit-set-of-plateaus-seen-from-the-heights-in-a-sunset-26070-large.mp4"
      type="video/mp4"
    />
    Your browser does not support the video tag.
  </video>
</header>
```

The classes used for the header:

- `relative`: Makes the header relative. We will make the video absolute to position it.
- `flex`: Adds a display flex so we can align the text block inside
- `items-center`: Aligns the text-block vertically
- `justify-center`: Aligns the text-block horizontally
- `h-screen`: This adds a 100vh height, so it's 100% of the viewport.
- `mb-12`: We add quite a big margin-bottom with this (3rem)
- `overflow-hidden`: The video will be slightly bigger than our header, so we don't want to show the overflow.

Then for our overlay text block, we use the following classes:

- `relative`: We need to make this relative, to place it on top of the video
- `z-30`: This needs to be higher than the z-index on the video
- `p-5`: Adds equal padding on each side (1.25rem)
- `text-2xl`: Makes the text nice and big (1.5rem)
- `text-white`: Make the text white
- `bg-purple-300`: A nice cool purple color
- `bg-opacity-50`: This one makes sure the background has an opacity of 50%.
- `rounded-xl`: Adds the nice rounder borders

And last but not least, we can add the classes for our video element:

- `absolute`: The video is an absolute positioned element
- `z-10`: We give it a lower z-index than our text-block
- `w-auto`: The width can be auto, so it will adjust
- `min-w-full`: We need to make the min-width 100%
- `min-h-full`: The same goes for the min-height
- `max-w-none`: Unset the default max-width

With this, we have all our classes in place. This will give us a very nice full-screen video header using only Tailwind CSS classes.

The end result can be found on this Codepen.

{% codepen https://codepen.io/rebelchris/pen/dypNrog %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)