Streaming live at 10am (PST)

Sticky youtube video on scroll

Hey!

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: https://codepen.io/vmasto_1470672674/pen/KyyMwq

I tried myself on Webflow: https://youtube-sticky.webflow.io/

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

Someone :slight_smile: ?


Here is my public share link: https://preview.webflow.com/preview/youtube-sticky?utm_medium=preview_link&utm_source=dashboard&utm_content=youtube-sticky&preview=935fea6d06f668769cc6796e30515623&mode=preview

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:

<style>
@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;
}
</style>
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?

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