Video Headers = Amazing First Impression

Overview

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:

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

Free To Use Videos

I recommend using Pexels.com, 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.

Click on Free to use to learn more:

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>

Note: 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 here.

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

Fall-Back Image

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.

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

Conclusion

With these simple tips, you can take your site to the next level. Enjoy!