Video Headers = Amazing First Impression
Tags: html, video, autoplay
Published: 2020-07-28 06:37:28

<h3>Overview</h3>
I've recently shifted from creating full-screen image backgrounds on the homepage to using full-screen video backgrounds and my clients are absolutely loving it. Here is an example from a site I just finished creating:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jf8b4av4favl3guy72i1.gif)

In this post I'll share how I achieved this with HTML and CSS.

<h3>Free To Use Videos</h3>

I recommend using <a href="https://www.pexels.com/videos/">Pexels.com</a>, you'll have access to a variety of high quality videos, along with download size options. You can also view the copyright status below the video. Any video I've encountered thus far has been "Free to use", which allows for commercial usage.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yt6e9g706zfirytnf3yx.png)

Click on <u>Free to use</u> to learn more:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ta4666rjn4i3426tq6yu.png)

<h3>HTML</h3>
``` html
 <section id="banner">
       <video
        class="video"
        autoplay
        loop
        muted
        playsinline
        src="assets/videos/earth2.mp4"> 
      </video>
      <div class="inner">
        <h2>Add Title Here</h2>
        <p>Add Description Here</p>
        <a href="#" class="scroll">Learn More</a>
      </div>
 </section>
```
<b>Note:</b> Replace the source link with where you've placed your downloaded video. You can also modify the video attributes to meet your needs by using any of the following attributes listed <a href="https://www.w3schools.com/tags/tag_video.asp">here</a>.

<h3>CSS</h3>
``` css
#banner {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    cursor: default;
    height: 100vh;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    text-align: center;
    background: #000;
}

#banner .inner {
    margin: auto;
    position: absolute;
    width: 100%;
}

#banner h2 {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: inline-block;
    font-size: 1.75em;
    opacity: 1;
    padding: 0.35em 1em;
    position: relative;
    z-index: 1;
}

#banner p {
    position: relative;
    letter-spacing: 0.225em;
    text-transform: uppercase;
    width: 31em;
    text-align: center;
    margin: 0 auto 1.5em;
}

#banner .more {
    #banner .more {
    -moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
    -webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
    -ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
    transition: transform 0.75s ease, opacity 0.75s ease;
    -moz-transition-delay: 3.5s;
    -webkit-transition-delay: 3.5s;
    -ms-transition-delay: 3.5s;
    transition-delay: 3.5s;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    padding-left: 0.225em;
    width: 16em;
    z-index: 1;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: transparent;
    border-radius: 3px;
    border: 1px solid;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.225em;
    line-height: 3.125em;
    max-width: 30em;
    padding: 0 2.75em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 auto;
}

@media screen and (min-width: 847px) {
 .video {
    position: unset;
    object-fit: fill;
 }
}

@media screen and (max-width: 846px) {
.video {
    position: absolute;
    height: 100%;
    opacity: 0.3;
    top: 0;
    left: 0;
}
```

<h3>Fall-Back Image</h3>
Since autoplay is not available on mobile browsers, we can use a media query to hide the video and display a still image from video instead.

``` css
@media (pointer:none), (pointer:coarse) {
  video {
    display:none;
  }
  #banner {
    background: url('/images/earth.png');
 }
```

<h3>Conclusion</h3>
With these simple tips, you can take your site to the next level. Enjoy!