<video autoplay loop id="video-background" muted plays-inline>
  <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>

<div class="page">

  <select class="select js-select">
    <option value="normal">normal (initial value)</option>
    <option value="multiply">multiply</option>
    <option value="screen">screen</option>
    <option value="overlay">overlay</option>
    <option value="darken" selected="selected">darken</option>
    <option value="lighten">lighten</option>
    <option value="color-dodge">color-dodge</option>
    <option value="color-burn">color-burn</option>
    <option value="hard-light">hard-light</option>
    <option value="soft-light">soft-light</option>
    <option value="difference">difference</option>
    <option value="exclusion">exclusion</option>
    <option value="hue">hue</option>
    <option value="saturation">saturation</option>
    <option value="color">color</option>
    <option value="luminosity">luminosity</option>
  </select>

  <div class="box js-box"></div>

</div>
* {
  margin: 0;
}
video { 
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
   background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.select {
  margin-top: 1rem;
  height: 3rem;
  background-color: #fff;
  position: absolute;
  z-index: 30;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 6vw;
  font-weight: 900;
  
  background:
        linear-gradient(red, transparent),
        linear-gradient(to top left, lime, transparent),
        linear-gradient(to top right, blue, transparent);
  background-size: cover;
  background-position: center;
  background-blend-mode: hue;
  mix-blend-mode: multiply;  
}
const select = document.querySelector('.js-select');
const box = document.querySelector('.js-box');

select.addEventListener('change', (e) => {
  box.style.mixBlendMode = e.target.value;
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.