Как сделать фон видео белым или прозрачным и изменить цвет заголовка?

.wrapper {
  width: 100%;
  height: 100vh; /* set height equal to 100% of the viewport height */
  background: pink;
  display: flex; /* this allows the child to sit in the middle of the div */
  justify-content: space-around;  /* tells the child to horizontally center itself */
  align-items: center; /* tells the child to vertically center itself */
  }
  
  .child {
  padding: 15vh;
  background: skyblue;  /* for a hover to work, you should always declare the static value (the not-hover value) */
  color: red;  /* ditto above */
  transition: 0.5s;  /* tells the child that, if it is going to change any values, this is how long it should take (.5 seconds). without this, the transition will happen automatically, without a fade. */
  }
  
  .child:hover {  /* when your mouse is hovering over this section... */
    background: white;  /* ...the background color changes to white... */
    color: blue; /* ... and the text color changes to blue */
    }
  

<div class = "wrapper">
<div class = "child">
Hello World!
</div>
</div>

$(document).scroll(function() {
    var topOfWindow = $(window).scrollTop();
    var bottomOfWindow = topOfWindow + $(window).height();
    var topOfChange = $('.child').offset().top;
    var bottomOfChange = topOfChange + $('.child').height();

    if ((bottomOfChange <= topOfWindow) || (topOfChange >= bottomOfWindow)) {
        $('.myClass').css('background-color', 'red');
    } else if ((bottomOfChange <= bottomOfWindow) && (topOfChange >= topOfWindow)) {
        $('.myClass').css('background-color', 'green');
    }
})

.wrapper {
  width: 100%;
  background: pink;
  display: flex;
  justify-content: space-around;
  align-items: center; 
  }
  
  .child {
    margin: 120vh 0;
  padding: 30vh 40vh;
  background: skyblue;
  }
  
  .myClass {
    background-color: red;
    padding: 5vh;
    transition: 2s; /* the easiest way to add a transition duration to the .css property in jquery */
  }

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Scroll down...
<div class = "wrapper">
<div class = "child">
<div class = "myClass">Hello World</div>
</div>
</div>