Scroll-triggered Fixed Video Player With jQuery And CSS3
File Size: | 2.01 KB |
---|---|
Views Total: | 7295 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.