There’s a brand new dance but I don’t know its name…

Part of the Blend Modes Reading List

I’ve previously demonstrated fullscreen background video for web pages and shown how to use mix-blend-mode to create auto-contrast text, but I’ve never combined them in a single article like this one.

Recently the fashion site Everlane site demonstrated just such a combination, which I’ve used as an inspiration for this article. While the code here is significantly simpler than the previous fullscreen video example, it also assumes that visitors are using far more recent browsers: mix-blend-mode isn’t yet supported in MS Edge. That being said, the code is still progressive: the video background will work in IE10+.

The Markup

The markup starts with a <video> element that uses the new playsinline attribute (allowing in-page playback in iOS 10), with mute (since fullscreen video - particularly looping autoplaying video - should always be silent) 

<video poster="fashion.jpg" playsinline autoplay muted loop>
    <source src="fashion.webm" type="video/webm">
    <source src="fashion.mp4" type="video/mp4">
</video>

In the associated Codepen I’ve filled the top of the page with a <header> element in a fixed position: 

<header>
    <h1>ZIGGY</h1>
      <nav>
        <a href="#">Men</a>
        <a href="#">Women</a>
        <a href="#">Stores</a>
        <a href="#">Contact</a>
      </nav>
</header>

I’ve placed some content below the navigation; this text needs to be short (consisting of a few words), since longer measures of auto-contrasted text will prove increasingly difficult to read: 

<div id="fashion">
  <h2>There’s a brand new dance but I don’t know its name…</h2>
</div>

The CSS

The video element is given an absolute position, with object-fit and a width and height of 100% to cover the browser window: 

video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

In order to make this work the <body> is set to a margin of 0: 

body {
  margin: 0;
  background: #000;
}

I also switch the colors and background of the header element on hover: 

header {
  position: fixed;
  width: 100%;
  text-align: center;
  color: white;
  transition: .4s;
}
header:hover {
  background: rgba(255,255,255,0.8);
  color: #000;
}

The central text is inside a <div> that uses flexbox to center its content, with a height that is at least the height of the browser window: 

div#fashion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

The text in the center uses mix-blend-mode: overlay to contrast the text; a value of difference would also be valid. 

h2 { 
  font-family: Century Schoolbook, Georgia, serif;
  margin: 2rem 3rem 0;
  mix-blend-mode: overlay;
  color: #fff;
 }

Video by Maximilian Kempe, licensed under Creative Commons. Freeware Moderne Sans font by Marius Kempken.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/kkYawX