Skip to main content

Multimedia

Embed images, video, and iframes. These components are thin wrappers around the native HTML elements — every prop you'd pass to <img>, <video>, or <iframe> is accepted.

br.image​

br.image({
  src: 'https://placekitten.com/600/400',
  alt: 'A kitten',
  width: 600,
  height: 400,
});

src can be:

  • An absolute URL.
  • A local file served from your app's static dir.
  • A data: URL (handy for in-memory thumbnails).

br.video​

br.video({
  src: '/clip.mp4',
  controls: true,
  autoPlay: false,
  loop: true,
  muted: true,
});

br.iframe​

Use iframes for trusted embeds such as dashboards, maps, forms, or sandboxed previews. Backroad requires a title so assistive technologies can identify the embedded content.

br.iframe({
  title: 'Backroad website',
  src: 'https://backroad.sudomakes.art',
  width: '100%',
  height: 480,
  loading: 'lazy',
  referrerPolicy: 'strict-origin-when-cross-origin',
  sandbox: 'allow-scripts allow-same-origin',
});

Use the allow prop when delegating browser features to the embedded page, for example allow: 'fullscreen'.

Combining with file upload​

const files = br.fileUpload({
  label: 'Pick an image',
  accept: { 'image/*': [] },
});

if (files.length > 0) {
  br.image({ src: files[0].filepath, width: 320 });
}

Try it​