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

Hi @avivtech @palombokevin

I know it has been a while since this post but I was wondering if either of you could help.

I have implemented the above and it seems to work well. But I would like the small video to show when the page loads at the top then when the user scrolls to the section it reacts as it should.

Here is my share link. Webflow - Test video

Thanks in advance.