title: How do use mix-blend-mode with the color of my choice to overlay text on a video?
body: <p>I need my text to be transparent towards the video behind it but not the background of the text.</p>
  <pre><code>&lt;main&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;video
              src=&quot;./pexels-tima-miroshnichenko-5377684.mp4&quot;
              autoplay
              muted
              loop
          &gt;&lt;/video&gt;
          &lt;h2&gt;Hello There!&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  
  
  main {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .container {
      width: 60%;
      height: fit-content;
      overflow: hidden;
      display: grid;
  }
  
  video,
  h2 {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      display: inline;
  }
  
  .container h2 {
      margin: 0;
      height: 100%;
      background: #ffdb99;
      font-size: 13vw;
      padding: 0;
      color: #fff;
      text-align: center;
      text-transform: uppercase;
      z-index: 2;
      mix-blend-mode: screen;
      font-family: 'Poppins', sans-serif;
  }
  </code></pre>
  <p>This is the result:
  <a href="https://i.stack.imgur.com/3Kgn3.png" rel="nofollow noreferrer">image of text/video overlay</a></p>
  <p>I need the background to stay opaque but the text to be transparent towards the video behind it!</p>
  <p>Thanks for your input in advance!!
  Hope my question is clear!</p>