Sticky youtube video on scroll

Design help Animations & Interactions
1

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

2

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
3

Hey @avivtech! Thanks man it’s working!

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

Capture d’écran 2020-04-13 à 17.47.05
Capture d’écran 2020-04-13 à 17.47.052764×1008 382 KB

4

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

5

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?

6

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
7

Yeyyyy working :slight_smile:

Thanks @avivtech

9

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.