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.
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!