DEV Community

Cover image for Video Headers = Amazing First Impression
aryaziai
aryaziai

Posted on

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:

Alt Text

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.

Alt Text

Click on Free to use to learn more:

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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');
 }
Enter fullscreen mode Exit fullscreen mode

Conclusion

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

Top comments (0)