GOOCODE - Find your code/scripts

0 On a page with video playback, sometimes we need to scroll the page to view video-related content information, such as profiles, related comments, etc., then when scrolling the page, the video player will leave the window area, this time we can use JS and CSS technology will The player toggle is fixed to the bottom right corner of the page.


Instructions
Introduce a jquery file in the page.

<script src="js/jquery.min.js"></script> 

HTML structure
Wrap the HTML5 video video element with a div element.

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

CSS style
Add the following simple CSS styles to the video element:

#videoBox {
  border: 10px solid #212223;
  transition: 0.5s;
}
video {
  width: 100%;
  vertical-align: bottom;
}
 
#videoBox.in {
  animation: ac 1s;
}
 
#videoBox.out {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 999;
  animation: an 0.5s;
}

javascript
Finally, use jquery to detect the scroll event of the window, and switch the videoBox class class in the appropriate position to hide and appear in the lower right corner.

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');             
  };  
 
});

Looked out, the principle is very simple, is to listen to the page scrolling event, then calculate the scrolling distance, and then change the position of the player container.