I Made my Own Picture-in-Picture player

I guess I'm not the only multitasker here, right? I use picture-in-picture so often while doing other things at the same time! So I HAD to implement this in my new course platform too.
Unfortunately (or for the better..) you can only use the PIP web API as a trigger on a click. But I wanted this picture-in-picture to appear when the user scrolled away while still watching the video. The result is so smooth that I just had to share it. And the final implementation is actually really simple!
✨ Become a PRO today via www.frontend.f...
🔗 Code, live playground: www.frontend.f...
#frontend #css #html #webdevelopment

[@Kay8B]

Awesome, appreciate these smaller concepts but with real world use cases.

[@frontendfyi]

Thank you so much, appreciate it!

[@shutock]

mate thats stunnin! 💎

[@frontendfyi]

Thank you 🙌

[@lalasmith2137]

Amazing! really love this and all the little touches you added, like as soon as i thought that when closing to picture in picture the video should stop running you said the same thing and also showed us how to handle it.
Love your attention to detail and your excellent videos, please continue sharing your knowledge. thank you!

[@frontendfyi]

Aaaaww!! Thank you for your kind words! ❤️ Glad you like the videos!

[@horrorshow7562]

Bro you are so underrated. I love your videos

[@frontendfyi]

Thanks! Glad you enjoy them!

[@daveoki]

Great video. What font and theme are you using?

[@frontendfyi]

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static

[@slfe]

I really love your videos. I know I'm late but is there any chance that I can get your course for € 99? 🥲

[@frontendfyi]

Could you send an email to [e-mail] and let me know why you didn't join earlier? 😏