Показывать видео html5 / youtube при прокрутке

$(document).ready(function() {
  
  var win = $(window); // Window
  var content = $(".content") // Content jquery element
  var overlay = $(".overlay"); // Overlay jquery element
  var buttonShowWhenVisible = $(".show-when-visible"); // This is the button which will fade in
  var showAfterScroll = $(".show-after-scroll"); // On scroll fade in
  
  var overlayHeight, scrollTop, stopMargin, opacityOut, opacityIn;
  
  win.scroll(function(e) {
    
    scrollTop = win.scrollTop();
    overlayHeight = overlay.outerHeight(); // The height of the overlay
    stopMargin = false;
    opacityOut = (1 - scrollTop / overlayHeight);
    opacityIn = (scrollTop / overlayHeight);
    
    if (opacityOut > 0.00)
      overlay.css("opacity", opacityOut);
    
    if (opacityIn < 1)
      showAfterScroll.css("opacity", opacityIn);
    
    if (scrollTop >= overlayHeight) {
      stopMargin = true;
      buttonShowWhenVisible.fadeIn();
    } else {
      buttonShowWhenVisible.fadeOut();
    }
    
    // Keep adding margin on top so that the element stays in the view until it reached overlayheight
    if (!stopMargin) {
      content.css({
        marginTop: scrollTop
      });
    }
    
  });
  
});

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

h1 span {
  color: orange;
}

.content {
  min-height: 2000px;
}

.overlay {
  background-color: rgba(0, 0, 0, .8);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  color: #fff;
  padding: 40px 0;
  text-align: center;
  z-index: 9999;
}

.show-after-scroll {
  text-align: center;
  padding: 60px 0;
  opacity: 0;
}

.btn-lg {
  background-color: orange;
  color: #fff;
  font-size: 12px;
  padding: 20px 80px;
  border-radius: 40px;
  border: none;
}

.show-when-visible {
  display: none;
}

.overlay p {
  max-width: 600px;
  font-size: 44px;
  margin: 0 auto;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "content">
  <div class = "overlay">
    <h1>Studio<span>.</span></h1>
    <p>This is some long big text saying hello</p>
    <br/><br/><br/>
    <button class = "btn-lg">REQUEST EARLY ACCESS</button>
  </div>
  <div class = "show-after-scroll">
    <p>There will a button appear when you scroll down, try it out!</p>
    <button class = "btn-lg show-when-visible">BONJOUR</button>
  </div>
</div>