Skip to content

Explorer: Embed video in an in-page overlay - #22

Merged
SebastianAment merged 1 commit into
mainfrom
video-overlay-pr
May 15, 2026
Merged

Explorer: Embed video in an in-page overlay#22
SebastianAment merged 1 commit into
mainfrom
video-overlay-pr

Conversation

@SebastianAment

@SebastianAment SebastianAment commented May 15, 2026

Copy link
Copy Markdown
Contributor

Replaces the header Video link's external YouTube redirect with an
in-page modal overlay (same UX pattern as the existing About modal).
Visitors stay on the explorer page while watching.

Implementation notes

  • The iframe src is set on open (lazy load — no page-load cost) and
    cleared 250ms after close (matches the overlay fade transition, so
    there's no black flash before the modal disappears).
  • Modal wiring deduplicated into a generic setupModal(overlay, { onOpen, onClose })
    helper. Both About and Video modals share it. Close behavior is
    declarative: any descendant element with [data-modal-close] becomes
    a close button; backdrop click and Escape are handled centrally.
  • Uses youtube-nocookie.com for the embed (privacy-enhanced).
  • Removed deprecated frameborder="0" HTML attribute (CSS already
    enforces border: 0).

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 15, 2026
Replaces the header 'Video' link's external YouTube redirect with an
in-page modal overlay (same UX pattern as About). The iframe loads only
on open and is cleared after the fade-out so playback stops cleanly.

Refactors the modal wiring into a generic setupModal() helper that
handles backdrop click, Escape key, and any descendant [data-modal-close]
button, with optional onOpen/onClose hooks. Both About and Video modals
now share this helper.
@SebastianAment
SebastianAment merged commit 39cfaf6 into main May 15, 2026
12 checks passed
@SebastianAment
SebastianAment deleted the video-overlay-pr branch May 15, 2026 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant