Embed Sanitized HTML Elements

The mediamedia module provides portable wrappers for a small set of HTML elements:

• iframeiframe
• videovideo
• audioaudio
• divdiv

Import the module as a namespace:

#import "@preview/shiroa:0.4.0": media

#import "@preview/shiroa:0.4.0": media

The functions share outer-widthouter-width, outer-heightouter-height, inner-widthinner-width, inner-heightinner-height, and an attributesattributes dictionary. The outer dimensions reserve space in paged output; the inner dimensions control the embedded browser element when supplied.

For example:

#import "@preview/shiroa:0.4.0": media
#media.iframe(
  outer-width: 640pt,
  outer-height: 360pt,
  inner-width: none,
  inner-height: none,
  attributes: (
    src: "https://example.com/embed",
    width: "100%",
    height: "100%",
  ),
)

#import "@preview/shiroa:0.4.0": media
#media.iframe(
  outer-width: 640pt,
  outer-height: 360pt,
  inner-width: none,
  inner-height: none,
  attributes: (
    src: "https://example.com/embed",
    width: "100%",
    height: "100%",
  ),
)

On native HTML, a helper creates the corresponding HTML element. On paged web targets, it emits an embedded command that Shiroa’s browser renderer replaces with that element. PDF output does not display the foreign HTML content, so provide alternative content when the media is essential.

See Multimedia Components for a rendered iframe example. Use get-page-width()get-page-width() or layoutlayout when the reserved size should follow the responsive page width.