Scroll-triggered Fixed Video Player With jQuery And CSS3

A small jQuery script that automatically fixes the video player box at the bottom of the webpage as you scroll a certain distance from the top (the video player is scrolled out of the viewport). Just like the fixed video box as you seen in the Tumblr.com.

How to use it:

1. Embed an HTML5 video into the video box.

<div id="videoBox" class="box">
  <video width="400" controls>
    <source src="sample.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video.
  </video>
</div>

2. Fix the video box when it's scrolled out of view.

#videoBox.out {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 999;
  animation: an 0.5s;
}

#videoBox.in { animation: ac 1s; }

3. Place the necessary jQuery library in the document.

<script src="//code.jquery.com/jquery-3.2.0.slim.min.js"></script> 

4. The jQuery script to detect the scroll event and toggle the CSS classes as you scroll down the webpage.

var ha = ( $('#videoBox').offset().top + $('#videoBox').height() );

$(window).scroll(function(){  

  if ( $(window).scrollTop() > ha + 500 ) { 
    $('#videoBox').css('bottom','0'); 
  } else if ( $(window).scrollTop() < ha + 200) {  
    $('#videoBox').removeClass('out').addClass('in');     
  } else {       
    $('#videoBox').removeClass('in').addClass('out');   
    $('#videoBox').css('bottom','-500px');             
  };  

});

---

This awesome jQuery plugin is developed by jlnljn. For more Advanced Usages, please check the demo page or visit the official website.