YouTube / Public web reference / 2026.09
States, interaction and responsive behavior
A state is a visible result with an input contract. Keep the route, selected state, feedback and focus in agreement.
All entries shown
State inventory
| Pattern | Entry and result | Boundary |
|---|---|---|
| signed-out-home-empty-feed | Explains that watching videos builds a feed and offers a search path. | observed source with reconstructed local fixture |
| signed-out-history-block | History is unavailable while signed out and visible history-control labels remain. | observed and first-party documentation |
| search-query-and-filtering | A populated query exposes Clear; filter selection moves aria-selected, updates fixture results, and Filters opens its panel. | mixed observed and first-party documentation |
| search-personalization-boundary | First-party help describes history-dependent relevance and signed-out protections. | first-party documentation |
| watch-player-shortcuts | The public contract records k, m, j/l, seekbar arrows, f, c, Shift+N/P, and i with its focus prerequisite. | mixed observed and first-party documentation |
| player-error-unavailable | An unavailable message stays visible and disabled controls retain a reason. | observed source with reconstructed local fixture |
| player-settings-and-captions | Local unavailable/original-media settings menus open; help describes speed, subtitles/CC, and quality as possible settings. | mixed observed and first-party documentation |
| engagement-actions | Share opens destinations, link copy, Start at, and Close; account actions stop at an explicit sign-in boundary. | mixed observed and first-party documentation |
| channel-tab-navigation | Home, Videos, Shorts, Live, Podcasts, Playlists, and Posts form a single-select tab set. | observed source with reconstructed selection behavior |
| channel-description-disclosure | Source exposes Description/tap-for-more and READ MORE; local disclosure changes text and state. | observed source with reconstructed local behavior |
| watch-description-disclosure | The tested local fixture reveals the retained description, changes its control to a less state, and sets aria-expanded=true. | observed opened source anatomy with tested local reconstruction |
| playlist-save-and-confirmation | Signed-out route opens its boundary. Help describes selection/creation, name/privacy, and confirmation after save. | mixed observed and first-party documentation |
| playlist-type-and-reorder | Local fixture filters ordered rows; help documents reorder and Shorts-only exception. | first-party documentation with reconstructed public fixture |
| shorts-continuous-feed | Fixture changes the next Short; help describes continuous feed. Clear Screen/speed remain rollout-specific. | mixed observed entry points and first-party documentation |
| appearance-menu | Opened source DOM visibly establishes Appearance-menu Back and selected Light check; local menu offers Light/Dark. | observed opened anatomy with reconstructed local theme behavior |
| premium-landing-boundary | Observed signed-out hero, dated plan cards, Premium Lite, benefits, comparison table, and seven FAQ disclosures render as a local reconstruction. | observed signed-out public source with local reconstruction; private purchase and account changes unverified |
Interaction contracts
| Control | Pointer / keyboard | Result and focus |
|---|---|---|
| Guide | Click or Enter/Space on menu; Escape closes mobile drawer. | aria-expanded mirrors visibility. Focus returns to the trigger after Escape. |
| Search | Type query, Enter submits. Clear button empties text and returns focus to input. | Local result route receives encoded query. Empty input yields a useful validation message. |
| Tabs and chips | Activate a chip with click, Enter or Space. Arrow keys apply only when implementing a roving tablist. | Selected state and panel/results change together. Use a live result count for filtering. |
| Dialog | Trigger opens, close button or Escape dismisses. | Initial focus enters dialog. Tab is contained. Focus returns to the opener. |
| Description | More expands; Less collapses. | aria-expanded changes and hidden content leaves the accessibility tree. |
| Player fixture | Documented k/m/j/l/c/f behavior only where the fixture exposes it. | No autoplay. The playable specimen uses an original local clip and verifies native time advancement. The unavailable specimen disables unsupported media actions and explains the recovery boundary. |
| Retry | Activate retry after a deterministic failure. | Loading precedes completion. Duplicate requests cannot stack inconsistent states. |
Responsive transformation
| Viewport | Observed/reconstructed behavior | Acceptance |
|---|---|---|
| 390 px | Compact masthead, single-column content, touch-sized actions. Product and documentation navigation may use different local drawer implementations. | No page-level horizontal overflow; long titles wrap; dialogs fit within the viewport. |
| 768 px | Intermediate content width, reduced columns and contextual navigation. | No fixed desktop width forced into the content area. |
| 1440 px | 56 px masthead, expanded desktop guide where appropriate; search rows and watch columns. | Compare exact reference and local captures at the same width. |
| 1920 px | More content width and larger collection capacity. | Keep readable text measures; avoid stretching compact controls. |
Motion and interruptions
The local reference uses a 150 ms ease transition for navigation visibility and quiet control feedback. These timings are reconstructed and are not claimed as YouTube’s internal motion tokens. Repeated input reverses the current state. Closing a dialog cancels local pending feedback. Under prefers-reduced-motion, transitions are removed; the final state and announcements stay identical.
Content state rules
| Condition | User-facing treatment | Local acceptance |
|---|---|---|
| Fresh home | Prompt search before inventing recommendations. | Empty state remains centered in the available canvas. |
| No search match | Repeat the query and offer an editable search field. | Do not erase the query or substitute unrelated content. |
| Unavailable video | Name the unavailable video state within the player stage. | Keep title, metadata and navigation usable. |
| Signed out | Explain the unavailable personal action and offer a sign-in entry. | No claim that a remote write succeeded. |
| Offline / local simulated failure | Keep content and input; show a retry action. | Retry changes loading and result status visibly and accessibly. |
| Long / localized content | Wrap titles and labels; use logical alignment. | Test 200% text size, Arabic direction and long German strings. |
Reconstructed reference contract. Loading, offline and long-content fixtures are local robustness additions unless linked to a production capture. They exercise implementation, not undocumented remote behavior.