Sticky Floating Video on Scroll

This tutorial shows how to implement the code by Vassilis Mastorostergios in Oxygen for making a video (or anything else) sticky/fixed to the bottom right (position can be changed) of the viewport after it is scrolled past.

Live Demo

Note: If you want the video to become sticky only once it is being played, you would need to implement this tutorial from tutsplus instead.

Here’s How

In the Oxygen editor add a Code Block.

PHP & HTML:

<div class="video-wrap">
  <div class="video">
    <iframe width="600" height="340" src="https://www.youtube.com/embed/0pThnRneDjw" frameborder="0" gesture="media" allowfullscreen></iframe>
  </div>
</div>

Adjust the above HTML depending on what you want to show on the page. Leave the .video-wrap and .video divs intact.

This will remain static initially on the page and will become fixed when the scroll position goes beyond/below the bottom of the .video-wrap div.

CSS:

@keyframes fade-in-up {
	 0% {
		 opacity: 0;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 1;
	}
}

.video iframe {
	 max-width: 100%;
	 max-height: 100%;
}

.video.stuck {
	 position: fixed;
	 bottom: 20px;
	 right: 20px;
	 width: 260px;
	 height: 145px;
	 transform: translateY(100%);
	 animation: fade-in-up 0.75s ease forwards;
	z-index: 1;
}

You may want to adjust the width and height of the fixed video in the above as needed.

JavaScript:

(function($) {
	var $window = $(window);
	var $videoWrap = $('.video-wrap');
	var $video = $('.video');
	var videoHeight = $video.outerHeight();

	$window.on('scroll',  function() {
		var windowScrollTop = $window.scrollTop();
		var videoBottom = videoHeight + $videoWrap.offset().top;
		
		if (windowScrollTop > videoBottom) {
			$videoWrap.height(videoHeight);
			$video.addClass('stuck');
		} else {
			$videoWrap.height('auto');
			$video.removeClass('stuck');
		}
	});
}(jQuery));

That’s it!