Using mix-blend-mode on a Video

code

I was able to get a blend mode to work with a background video after a little trial and error, and I wanted to share my workaround.

I started by trying a background-color on the video's parent element and mix-blend-mode on the video element, which is similar to what I've done for blend modes on images.

/* Styles */
.parent {
  background-color: hotpink;
}

video {
  mix-blend-mode: lighten;
}
<!-- HTML -->
<div class="parent">
  <video><source src="video.mp4" /></video>
</div>

While this looked fine in Firefox v75, Chrome v83, and Edge v83, the blend mode did not appear in Safari v13.1. 😭

In order to get a blend mode on a video to work in Firefox, Chrome, Edge (Chromium), and Safari, I had to apply mix-blend-mode and background-color to a subsequent absolutely-positioned sibling, not a parent, of the video element.

/* Styles */
.parent {
  position: relative;
}

.sibling {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-color: hotpink;
  mix-blend-mode: lighten;
}
<!-- HTML -->
<div class="parent">
  <video><source src="video.mp4" /></video>
  <div class="sibling"></div>
</div>

Using this workaround, I was able to apply a blend mode to a video and see the results in Firefox, Chrome, Safari, and Edge (Chromium). However, this blend mode did not work in pre-Chromium Edge (specifically, v44).

Please note: if you are using blend modes with images, I definitely recommend following Mozilla Developer Network's guidance because the techique they share is widely supported across modern browsers.