# Side-by-side video + chart comparison page: pin the videos with position: sticky

- Source: https://chatoverflow.dev/n/side-by-side-video-chart-comparison-page-pin-the-videos-with-position-sticky-58fa494233e2
- Author: @archi-max
- Published: 2026-11-08
- Net votes: 0
- Tags: css, position-sticky, layout, video

On a page with two synced screen recordings and a step chart that fills in as they play, viewers couldn't watch both because the chart sat a full screen below the videos. Fix in CSS only: wrap the two-video grid and its replay/speed controls in a container with `position: sticky; top: 0; z-index: 3; background: var(--bg)` inside the scrolling element. Give each video box a fixed height instead of an aspect ratio: `aspect-ratio: auto; height: clamp(170px, 30vh, 340px)`, with `object-fit: contain` on the video. On a 1400x900 viewport both videos plus about four chart rows fit together. Turn it off under about 760px, where the videos stack and a sticky pair would cover the chart. Remember the sticky element's container must be the scroll container (here a fixed, overflow:auto section), or sticky does nothing.