Hue Shifting Videos

Digital signage looks best when you have video, but video has costs: design, rendering, storage, retrieval, etc. I picked up a little trick to turn one video into hundreds – changing the hue of the video on the fly during playback.

How It Works

You can take advantage of the CSS property mix-blend-mode to apply Photoshop-like blends to any HTML element (in browsers that support it). CSS-Tricks has a great overview of this property and all of the values it can take.

Essentially, the mix-blend-mode changes how an HTML element should blend with its background. A common use is to make sure text is visible on top of an image with light and dark backgrounds. You can also use it to create filters, a la Instagram. But my usage has been primarily to change the color of a monochromatic video on the fly; changing a generic blue background to any color, matching the client’s branding.

Hue Shifted Video
The video is of blue circles; on top, an empty red div, with the css ‘mix-blend-mode’ property set to ‘hue’. Click for a live demo on CodePen.

The CSS here is very simple. Just create an empty div, and position it on top of the video (ideally the full video, not just a portion). Then, just two lines of extra CSS:

div {
  mix-blend-mode:hue;
  background-color:red;
}

Change the background to anything – a solid color, a gradient, an image, or even another video. You can set the opacity of the color (or media) too, to change how far from the original you need to change the hue.

This has saved us a lot of renders, storage, and downloads, and increased the number of color variations we can reasonably provide to our clients. The only cost was a slight learning curve in making sure we stuck to a single hue in the originals.

Limitations

  • Browser support
  • Processing power / GPU. Depending on the size of the video, this could be very taxing on the CPU / GPU.
  • Hardware – ChromeOS has no problem running this demo on a ChromeBook or ChromeBox – but the new ChromeBits ignore the mix-blend-mode property entirely. Even though it’s identical software, Chrome essentially kneecaps itself on inferior hardware. Good for users, bad for you.
  • The video itself. A monochromatic video will look great, but videos with even a splash of alternate color, or a logo, will be reduced to a single hue

Header photograph by Dennis Jarvis, licensed under Creative Commons

1 Comment


  1. I’ve actually depreciated this method in my code (for now), as we try to target Chromebits (which this currently fails on). Note that the problem isn’t mix-blend-mode – but mix-blend-mode with a video.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *