通过播放视频来查看文字

Question

基本上，我现在所拥有的是视频顶部的渐变背景，现在我试图创建一个透明文本，使您可以观看视频的一部分。有人可以帮忙吗？ ：）

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gradient-bg{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    background: rgb(63,61,106);
    background: linear-gradient(52deg, rgba(63,61,106,1) 0%, rgba(98,0,0,1) 100%); 
}

<div class="fullscreen-bg">
  <video autoplay muted loop class="fullscreen-bg__video">
    <source src="videos/typical-new-york-city-summer-street-market-nyc-walk-thru-2018-june-8-real-sounds-unedited.mp4" type="video/mp4">
    <source src="videos/typical-new-york-city-summer-street-market-nyc-walk-thru-2018-june-8-real-sounds-unedited.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
        
<div class="gradient-bg">
  <h1><span>New York Street Food</span></h1>
  </div>
</div>