Reveal html5/youtube video on scroll

Question

I have a video (currently it's embedded YT video, but could be a normal mp4/HTML5), which I would like to be revealed on scroll. So when scrolled, the text content should go into the top and then the video should be revealed and the user should be able to press Play - it's some kind of a parallax effect maybe, but I couldn't find anything similar... Any other/better solution is very welcome!

EDIT: This is the effect which I want to achieve - maybe there's some ScrollMagic solution..? https://www.invisionapp.com/studio

Pen: https://codepen.io/anon/pen/wjMwqE

.container {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  background: lightgrey;
  padding: 100px;
}

.video-container {
  width: 800px;
  background-color: lightblue;
  margin: 100px auto;
  position: relative;
}

.text-container {
  width: 100%;
  height: 100%;
  background-color: rgba(234, 654, 123, .3);
  position: absolute;
  top: 0;
  left: 0;
}

.text-container-content {
    text-align: center;
    margin: 150px auto;
}

<div class="container">
  <div class="video-container">
    <iframe width="800" height="415" src="https://www.youtube.com/embed/HECa3bAFAYk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <div class="text-container">
      <div class="text-container-content">
        <h3>Title here</h3>
        <p>Subtitle here</p>
        <button>Button</button>
      </div>
    </div>
  </div>
</div>

(The "duplicate" answer does not have similar video example)

Answer 1

Just try to understand what I did in the below fiddle. Its not as hard as it might look like.

What you basicly do is just get the height of the .overlay element, then when user is scrolling keep track of the scroll position using the scrollTop() function.

scrollTop(): Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

When the scrollTop() reaches the overlayHeight, show the button.

Also keep adding marginTop: scrollTop() until above sentence is true. So that the .show-when-visible element stays visible instead of sitting at the top of the document.

---

Note that the below snippet is a basic demo showing how you can achieve what you want. Ofcourse you can add event's to the buttonShowWhenVisible. Which the opens a popup / iframe with the corresponding video. ie:

buttonShowWhenVisible.click(function() {
    // code the show the video
});

---

Open below snippet in full page mode

$(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>

You can play with the snippet here: https://codepen.io/richardmauritz/pen/QrKvBQ?editors=0010