html5 video fix at bottom when scroll page with jQuery

It's a convenient  way to show video when users scroll the page, which they won't miss the video.

Step1:
link the Jquery in the bottom of the body

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Step2:
The mp4 video in the div named videoBox derived from the file.
Then the article which ever you like is to strench the page height for enough length to scroll.

html

The videoBox has a border and the video verticle-align:bottom is to fit the border.
Setting the two situations call in and out ,which are when doesn't scroll and scroll to the fixed scrollTop.
When users scroll to a bigger height, the video should be fixed at the right bottom of the page and the first layer with animations each.

css

Step3:

js

ha is the total height of the length of videoBox top from page and the height of the videoBox.

When scroll the page,if the top distance larger than the ha+200, the videoBox should add the class out and remove the class in.Else the videoBox should remove the class out and add the class in. (IF...ELSE...)

I got a different video sample from other source in CodePen.