Streaming live at 10am (PST)

Sticky youtube video on scroll


I found this tutorial and tried reproducing it inside Webflow. I think this is possible but I’m missing something…

Here is the initial tutorial from codepen:

I tried myself on Webflow:

But as you can see it’s not working at it should be.

Someone :slight_smile: ?

Here is my public share link:

Hi Kevin, welcome back :slight_smile:

  1. You don’t need the .stuck div, delete it.
  2. You DO need the .stuck style from the css, the iframe style and the @keyframes

Add this to your project:

@keyframes fade-in-up {
  0% { opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
iframe {
  max-width: 100%;
  max-height: 100%;
.stuck {
  position: fixed;
  bottom: 20px;
  right: 20px;
  transform: translateY(100%);
  width: 260px;
  height: 145px;
  animation: fade-in-up .25s ease forwards;
1 Like

Hey @avivtech! Thanks man it’s working!

However, how do I adjust the video window? I see it like this now

Make sure you cleared the properties you gave to the .stuck DIV

stuck div has been deleted, but I think we need to adjust the size of the .stuck because with 100% width/height video is cropped but not resized has it should be… any idea?

You should give the iframe inline styles of: width=“100%” height=“100%” and change the css to 600x340 so when the .stuck class kicks in it will resize.

1 Like

Yeyyyy working :slight_smile:

Thanks @avivtech