An overlay is any UI element — a panel, card, tooltip, or full-screen layer — rendered directly on top of the HTML5 video element to present supplementary content or interactive controls without stopping the video stream. In interactive video systems, overlays are the content payload that a hotspot click reveals: a text panel describing a product feature, an image carousel, a linked external resource, or an embedded quiz question. Technically, overlays are implemented as absolutely positioned DOM elements stacked above the video via CSS z-index, with pointer events managed so that clicks on non-overlay areas pass through to the video controls. The distinction from a hotspot is one of role: the hotspot is the trigger zone the learner clicks, while the overlay is the content that appears in response; some authoring tools merge both concepts under "hotspot," but keeping them separate in the data model simplifies reuse — the same overlay panel can be triggered by different hotspots or by a timer. Overlays that appear without a learner click — for example, a chapter title card that fades in at the start of each section — are sometimes called "passive overlays" to distinguish them from interaction-triggered ones. For accessibility, every overlay must be announced by screen readers via ARIA live regions or focus management, and any overlay that obscures meaningful video content must have a clear dismiss control. Overlay events can be emitted as xAPI statements using the "displayed" or "interacted" verb with the overlay identifier in the object field.
