Background video

Open In Editor Publish Your Code

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }
  
  .hero {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
    position: relative;
    padding: 0 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .content {
    text-align: center;
  }
  
  .content h1 {
    font-size: 160px;
    color: #fff;
    font-weight: 600;
    transition: 0.5s;
  }
  
  .content h1:hover {
    -webkit-text-stroke: 2px white;
    color: transparent;
  }
  
  .content a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    border: 2px solid white;
    padding: 14px 50px;
    margin-top: 20px;
    transition: 0.5s;
  }
  
  .content a:hover {
    background: #fff;
    color: #000;
  }
  
  .back-video {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
  
  @media (min-aspect-ratio: 16/9) {
    .back-video {
      width: 100%;
      height: auto;
    }
  }
  
  @media (max-aspect-ratio: 16/9) {
    .back-video {
      width: auto;
      height: 100%;
    }
  }

Background video

Recommended

CSS Loading Animation with Background Image

CSS Animated Background with Shapes and Text

Animated Dots Background

HTML

CSS

JS

Recommended

CSS Loading Animation with Background Image

CSS Animated Background with Shapes and Text

Animated Dots Background

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS