Jhey ʕ·ᴥ·　ʔ @jhey.dev · May 21

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @​container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }

93 likes 3 replies

?

Replies

Jhey ʕ·ᴥ·　ʔ · May 21

no support? use a thin "sentinel" element that you watch with IntersectionObserver to toggle attribute styling 🤙 if (!CSS.supports('container-type: scroll-state')) { new IntersectionObserver(([e]) => { root.dataset.stuck = !e.isIntersecting }).observe(sentinel) }

Phendan · May 21

I had no idea this was possible with pure CSS, TIL!

Jack Harner 🚀 Web Developer · May 21

we're just going to be able to do EVERYTHING with pure CSS eventually, apparently? 😂