hb-modal-video

Category: media · Tags: media, video, overlays · Package: @htmlbricks/hb-modal-video

Overview

hb-modal-video is a video modal built on top of hb-dialog. When uri is non-empty, the nested dialog opens and shows either:

• an HTML5 <video> player (default), or
• a YouTube embed when provider is set to youtube.

The host can supply a dialog heading via the title attribute and/or the title slot. Visibility is driven by uri: closing the dialog clears uri, title, and item on this component and emits videoModalEvent whenever the dialog reports a show/hide change.

This component declares a dependency on hb-dialog (register or load the dialog bundle as required by your integration).

Custom element

| Tag | |-----| | hb-modal-video |

Attributes

Web component attributes are snake_case and string values in HTML (booleans use yes / no where applicable in the stack; this component’s public surface is mostly URLs and labels).

| Attribute | Required | Description | |-----------|----------|-------------| | uri | Yes (for TypeScript) | Media URL. Non-empty value opens the modal. Use an MP4 (or other browser-supported) URL for the default player, or a YouTube embed URL when provider is youtube. Cleared internally when the dialog closes. | | title | No | Plain text used for the dialog title area. When set, the title row is rendered and the default slot content is Video: {title} unless you override the title slot. | | item | No | Identifier passed through as the nested dialog’s id (opaque string for analytics, routing, or correlation). Defaults to defaultItem in markup when omitted. Reset to empty when the modal closes. | | provider | No | Set to youtube to render an <iframe> instead of <video>. Any other value uses the HTML5 video path. | | id | No | Optional host element id (typing only; use as in other hb-* components). | | style | No | Optional inline style string on the host (present in typings for parity with other components). |

YouTube vs HTML5

• HTML5 (default): provider empty or not youtube. The template uses <video controls> with a <source src="{uri}" type="video/mp4" /> and a captions track placeholder. Ensure the URL and MIME type match what the browser can play.
• YouTube: provider="youtube" and uri must be an embed URL (for example https://www.youtube.com/embed/...), not a watch page URL.

Slots

| Slot | When it appears | Purpose | |------|-----------------|----------| | title | Only when the title attribute is set (non-empty). | Replaces the default Video: {title} heading in the dialog title area. |

Body content is not slotted: the player is always the dialog body slot content from this component.

Events

| Event | detail | When | |-------|----------|------| | videoModalEvent | { id: string; show: boolean } | After each hb-dialog modalShow notification. On open, id is updated from the dialog. On close, id is empty, show is false, and uri / title / item are cleared on hb-modal-video. |

Listen in HTML:

<script>
  document.querySelector("hb-modal-video").addEventListener("videoModalEvent", (e) => {
    console.log(e.detail.id, e.detail.show);
  });
</script>

Styling

Bulma is loaded in the shadow root; the video stage uses a 16:9 letterboxed area. See Bulma CSS variables.

| CSS variable | Role | |--------------|------| | --bulma-scheme-invert | Background fill behind the iframe / <video> inside the embed container (falls back to #000 in SCSS). |

Modal chrome (backdrop, dialog frame, buttons) comes from hb-dialog, not from this host’s ::part list (extra/docs.ts defines no CSS parts on this package).

TypeScript (authoring)

export type Component = {
  id?: string;
  style?: string;
  item?: string;
  uri: string;
  title?: string;
  provider?: string;
};

export type Events = {
  videoModalEvent: { id: string; show: boolean };
};

Examples

HTML5 sample

<hb-modal-video
  uri="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
></hb-modal-video>

With title

<hb-modal-video
  uri="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
  title="Flower sample (MDN)"
></hb-modal-video>

YouTube embed

<hb-modal-video
  uri="https://www.youtube.com/embed/tgbNymZ7vqY"
  provider="youtube"
  title="Sample YouTube clip"
></hb-modal-video>

With opaque item id

<hb-modal-video
  uri="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
  item="demo-flower-001"
></hb-modal-video>

License

Apache-2.0 (see package LICENSE.md where applicable).