Window Seat Video.js v10 skin

Window Seat:

Over
—
Latitude
—
Longitude
—
Altitude
—
Sun
—
Solar time
—

Ground track

The dot marks the point directly below the station. Each line is a pass, blue where the ground was in daylight, violet at night. The list of passes does the same with the keyboard.

No orbit data, chapters or captions: this pass plays on the plain skin, as an ordinary video would. The sky stays at night.

Six passes

One orbit, cut into six windows

Each pass is a stretch of a real orbit from 2026. The strip under each name is its daylight, worked out from the station’s position and the sun’s.

    Design notes

    Six stops along the ground track

    The player is a seat by the window. Its controls report where the station is and whether the ground below is in sunlight, and they stay legible over bright cloud and dark ocean.

    1. 01 The seek bar is the pass

      With orbit data, the bar shows the light on the ground below the station: blue for day, violet for night, blended through twilight. A tick marks each sunrise and sunset. Without orbit data it is a plain track, split by chapters.

      DayTwilightNight

    2. 02 The accent follows the sun

      The accent is gold while the sun is more than 6° up, coral within 6° of the horizon and green below. It is computed from orbital data at the station’s position, never sampled from the picture. This page’s sky follows the same number.

      following the pass

    3. 03 Icons in two solid tones

      Each icon is a solid shape over a second layer at 45% opacity, drawn on a 20 px grid. Filled shapes hold up over bright cloud better than thin outlines. Parts move with state: speaker waves retract, caption marks draw in.

    4. 04 Overflight lists the places

      Chapters name the places the station passes over. Overflight (P) lists them as a route: passed places filled, the current one ringed, the rest hollow. Choosing a place seeks to it, and a callout names the place below.

      1. 05 A porthole on the globe

        In fullscreen, G opens this globe inside the player as a round porthole in three sizes, and it drops to a corner when the controls hide. The dot is the point directly below the station; the camera may be looking elsewhere.

      2. 06 Readable over any footage

        Controls sit on dark tinted glass: text and icons meet 4.5:1, tracks and focus rings 3:1. Focus is a 2 px ring in the accent and touch targets grow to 44 px. Reduced motion, more contrast and forced colours are all honoured.

        44 px targets · 2 px focus ring

      Keyboard

      Every control, by key

      Tab reaches every control. The skin also answers to these keys, shown in its tooltips and menus.

      SpaceK
      Play or pause
      ←→JL
      Seek back or forward
      ↑↓
      Volume
      M
      Mute
      0–9
      Jump to 0–90%
      HomeEnd
      Start or end
      <>
      Slower or faster
      C
      Captions
      F
      Fullscreen
      I
      Picture-in-picture
      PN
      Overflight
      G
      Globe porthole
      A
      Aurora glow
      Esc
      Close menus and popups

      Reuse

      Take the seat

      Window Seat is a Video.js v10 HTML skin made for the Video.js Skins Design Challenge. Copy the skin folder into a project, then give each player its markup and a media element. Chapters, captions and orbit data are optional.

      Code under the Apache License 2.0. Footage, NASA imagery and third-party audio are outside the code licence. About the project

      Customise · preview only

      Accent

      Default: follows the sun (gold, coral, green). A fixed accent overrides it.

      Embed

      All public custom properties
      --media-accent-color
      Replaces the daylight accent
      --media-accent-text-color
      Text and icons on the accent
      --media-border-color
      Hairline around the player
      --media-border-radius
      Corner radius of the video
      --media-font-family
      Interface type
      --media-object-fit
      How the video fills the frame
      --media-object-position
      Where the video sits in the frame
      --media-scale-unit
      Base unit for every control size (16 px)