htmlcssvideohtml5-video

How is remove background from .mp4 video?

I found an interesting thing on the game's website. When you focus on a button, it adds a <video> as a background on hover. But this video is in `mp4` format with a black background. Can someone explain how the developer made it so that we don't see the black color, but only the transparent part of the video.

video without alpha chanel

It's not like webm or some alpha chanel. How did they do it?

I don't understand how it works. Can anyone tell me how to remove the background in `mp4`?

Solution

  • The website uses mix-blend-mode: screen when superimposing the video onto the background.

    When I first came across this blend mode, I thought the term ‘screen’ had something to do with the computer screen. Now I realise that it actually derives from screen printing, where a mesh screen is placed over a background image. So now I think of it like a mask, but one which works in colour.

    mark {
  font-family: monospace;
  background: #ddd;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 0 2px;
}

.d1 {
  display: flex;
  gap: 0.5em;
  justify-content: start;
  align-items: center;
  margin-bottom: 1em;
  font-weight: bold;
}

.d1 > * {
  box-shadow: 0 0 12px rgb(0 0 0 / 0.1);
}

.s1, .s2 {
  width: 180px;
  aspect-ratio: 1;
}

.s1 {
  background-image: url("https://picsum.photos/id/1000/360");
  background-size: contain;
  position: relative;
}

.s2 {
  background-image: conic-gradient( 
     white 45deg, grey 45deg, grey 135deg, red 135deg, red 225deg, black 225deg, black 315deg, white 315deg);  
}

.s1 > .s2 {
  position: absolute;
  mix-blend-mode: screen;
}
    <p>example of <mark>mix-blend-mode: screen</mark></p>

<div class="d1">
  <span class="s1"></span>
  +
  <span class="s2"></span>
  =
  <span class="s1">
    <span class="s2"></span>
  </span>
</div>