# Embedding DualView Comparisons

DualView comparisons can be embedded in any web page, documentation site, portfolio, or report with a plain iframe. Add `embed=1` to any DualView URL to render the chrome-less view: just the comparison surface, with no header, sidebar, or timeline.

The full URL parameter schema is documented in [url-parameters.md](https://www.dualview.ai/docs/url-parameters.md). Embeds never upload anything; media is referenced by URL (`a`/`b`) or carried in the `#dv=` fragment, and is fetched/decoded by the viewer's browser.

## Basic iframe

```html
<iframe
  src="https://www.dualview.ai/app?a=https://example.com/before.png&b=https://example.com/after.png&mode=slider&sp=50&embed=1"
  width="800"
  height="450"
  loading="lazy"
  title="Before/after comparison"
  allowfullscreen></iframe>
```

Always include `loading="lazy"` so the embed does not block the host page's initial load, and a descriptive `title` for accessibility.

## Responsive embed

Wrap the iframe in a container with an aspect-ratio so it scales with the host layout:

```html
<div style="position: relative; width: 100%; aspect-ratio: 16 / 9;">
  <iframe
    src="https://www.dualview.ai/app?a=https://example.com/v1.mp4&b=https://example.com/v2.mp4&mode=side-by-side&embed=1"
    style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0;"
    loading="lazy"
    title="Video comparison"
    allowfullscreen></iframe>
</div>
```

## Locking interactions

Inside scrollable articles, wheel-zoom and drag-pan can fight the host page. Disable them per embed:

```html
<iframe
  src="https://www.dualview.ai/app?a=https://example.com/a.png&b=https://example.com/b.png&mode=slider&embed=1&nozoom=1&nopan=1"
  width="800"
  height="450"
  loading="lazy"
  title="Image comparison (interactions locked)"></iframe>
```

- `nozoom=1` disables wheel/pinch zoom.
- `nopan=1` disables drag panning.
- The slider divider stays draggable in slider mode.

## Self-contained embeds

For small content (images, text, JSON), the `#dv=` fragment makes the embed work without hosting the media anywhere:

```html
<iframe
  src="https://www.dualview.ai/app?embed=1#dv=...payload..."
  width="800"
  height="450"
  loading="lazy"
  title="Self-contained comparison"></iframe>
```

The fragment payload is generated by DualView's Share dialog. It is never sent to a server; the viewer's browser decompresses it locally.

## Public-media link builder

Use [Share & embed](https://www.dualview.ai/share.html) to create a lightweight image or video viewer without opening a project. Its links use `/comparison.html#c=…`, a separate format from editor links. Recipients explicitly load the public media hosts. The viewer supports informal blind review and an image overlay slider; it does not collect votes or publish an indexed gallery.