JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="video">
video
</div>
<div id="fake-element">

</div>
<div id="video1">
video
</div>

CSS

#video {
  height: 500px;
  width: 50px;
  display: inline-block;
}
#fake-element {
  display:block;
  height: 200px;
  width: 50px;
  margin-bottom: 100px;
}
#video1 {
  width: 50px;
  height: 900px;
  display: block;
}

JavaScript

var h = $('#fake-element').position().top;
console.log(h);
            $(window).scroll(function(){
                var y = $(window).scrollTop();
                if( y > h){
                    $('#video').css({
                        'position' : 'fixed',
                        'display' : 'block',
                        'left' : '50px',
                        'width' : '50px',
                        'top' : '45px'
                    });
                } else {
                    $('#video').css({
                        'position' : 'relative',
                        'display' : 'block',
                        'left' : '0px',
                        'width' : 'auto',
                        'top' : '0px'
                    });
                }
            });