Fullscreen Background Video with Mix-Blend-Mode Overlay Text

fullscreen-background-video-with-mix-blend-mode-overlay-text.markdown

Fullscreen Background Video with Mix-Blend-Mode Overlay Text

Shows full-screen video with effective, legible text overlay using mix-blend-mode, inspired by work at Everlane. Video by Maximilian Kempe, licensed under Creative Commons. Freeware Moderne Sans font by Marius Kempken.

A Pen by Dudley Storey on CodePen.

License.

index.html

<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion.jpg" playsinline autoplay muted loop>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/fashion.mp4" type="video/mp4">
</video>
<header>
<h1>ZIGGY</h1>
  <nav>
    <a href="#">Men</a>
    <a href="#">Women</a>
    <a href="#">Stores</a>
    <a href="#">Contact</a>
</header>
<div id="fashion">
  <h2>There’s a brand new dance but I don’t know its name…</h2>
</div>

style.scss

@font-face {
  font-family: Moderne Sans;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moderne_sans.woff2)
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #000;
  background-size: cover;
}
video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}
div#fashion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
header {
  position: fixed;
  width: 100%;
  text-align: center;
  color: white;
  transition: .4s;
}
header:hover {
  background: white;
  color: #000;
}
h1 {
  font-family: Moderne Sans, sans-serif;
  text-align: center;
  font-size: 2rem;
  width: 100%;
  letter-spacing: .5rem;
}
nav a {
  text-decoration: none;
  color: inherit;
  padding: 1rem;
}
h2 { 
  font-family: Century Schoolbook;
  font-size: 8vmin;
  text-align: center;
  margin: 2rem 3rem 0;
  mix-blend-mode: overlay;
  color: #fff;
  font-weight: 100;
}