ABOUT
PLUGINS
RESOURCES
FACEBOOK GROUP
ADD TESTIMONIAL
CONTACT
WPDEVDESIGN
HOME
TUTORIALS
TESTIMONIALS
MEMBERSHIP
LOG IN

REGISTER
Published on Dec 11, 2019
Sticky Floating Video on Scroll

Sridhar Katakam
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:






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!

Free Content, Oxygen
Sticky, Video
RELATED TUTORIALS
VIEW ALL
Revealing Footer in Oxygen
Mar 17, 2020
Revealing Footer in Oxygen
Tags: CSS, jQuery, Sticky

One Page Site with Fixed Left Nav
Aug 30, 2019
One Page Site with Fixed Left Nav
Tags: CSS Grid, One Page, Single Page, Sticky

Sticky Scrolling in Oxygen
Jun 4, 2019
Sticky Scrolling in Oxygen
Tags: Sticky

PREVIOUS TUTORIAL
Drop-down Menu in Oxygen
NEXT TUTORIAL
Centered Overhanging Logo in Oxygen
Get Full Access to all the Content!
Years of experience and hundreds of hours of research distilled into clear actionable tutorials

JOIN TODAY
WPDEVDESIGN
Copyright © 2024 · All rights reserved.

網上 = 357