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!

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: