Elementor Pro, Sticky Video
3/5

Sticky Video On Scroll

Greetings All.

You may have seen this effect on some other sites and wonder if it was even possible with Elementor.

Well the answer is yes and very easy I might add. With no additional javascript needed just some crafted CSS.

Keep in mind for this particular method to work you will need Elementor Pro.

Let’s Begin

First we need to drag a single video widget onto the page in a single column section.

Next we need to go inside that section and apply this CSS and select the option to make the section sticky top in the motion effects.

I chose to have this sticky only on desktop.

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

selector.elementor-sticky--effects {
    right: 25px!important;
    top: 70vh!important;
    width: 500px!important;
    transform: translateY(100%);
    animation: fade-in-up 0.75s ease forwards;
}
selector {
     transition: all 0.5s ease;
     
}

The above css adds some animation and position to the video once it is in its sticky state.

Here is the result:

Hope you found this useful 😀.

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

Related Posts

**Responses and Solutions to comments are handled on Sundays & Mondays.

Leave a Reply

Your email address will not be published. Required fields are marked *

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.
Request A Tutorial

Have a request I would love to hear about.