Post

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

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%); } }

5 reposts93 likes

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

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) }