DEV Community

Cover image for Video Headers = Amazing First Impression
aryaziai
aryaziai

Posted on

2 1

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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay