» » Pin the HTML5 video player to the bottom right corner of the page when the page scrolls

 

Pin the HTML5 video player to the bottom right corner of the page when the page scrolls

Author: bamboo06 on 7-04-2019, 01:06, views: 510

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.

Category: Javascript / CSS

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
Information
Comment on the news site is possible only within (days) days from the date of publication.