Making Embed YouTube Videos Sticky

Sticky video is popular amongst news publishing websites. These videos are usually live streamed from a media server, requiring a monthly hosting subscription fee. If you are looking for a free alternative to implement a similar concept, you can try customising YouTube embed video using JavaScript to your liking.

I have written a simple JS library that can make YouTube video embed stick on the page when visitor scroll pass the video. You simply need to add a code snippet to the BODY tag and the class name "ytsticky" to the original YouTube iframe tag.

<iframe **class="ytsticky"** width="640" height="360" src="https://www.youtube.com/embed/1mmxuuVmST4?autoplay=1&showinfo=0&modestbranding=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script type="text/javascript">	
(function(w,d){
function r(){
var s=document.createElement('script');s.async=1;s.type='text/javascript';s.src='ytsticky.js?v=1';(d.body||d.head).appendChild(s);
s.onload = function () {
    ytstickyfunc = new ytsticky();
};
}
if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}
})(window, document);
</script>

The script can currently support only 1 YouTube video. You are free to extend additional features to the script.

Download free JavaScript Library ytsticky.js here