How-To Recipe

Capture an iframe as an image

Include a same-origin iframe in an element capture while preserving the frame’s visible viewport and surrounding styles.

TL;DR

Capture the parent container normally. Same-origin iframe documents are accessible; cross-origin iframe contents are not.

Copy-paste example

Install @zumer/snapdom, select the rendered element, and capture it:

const panel = document.querySelector('#panel-with-frame')
const image = await snapdom.toPng(panel, {
  placeholders: true,
  embedFonts: true,
})
document.body.appendChild(image)

Why this pattern works

SnapDOM reads an accessible iframe document, captures its visible content and places the result back into the parent snapshot.

Capture a same-origin iframe

The embedded srcdoc frame is same-origin and can be included in the parent capture.

SAME-ORIGIN FRAME

The captured result will appear here.

Limits and common mistakes

The same-origin policy prevents JavaScript from reading arbitrary third-party iframe documents. A client-side library cannot bypass that boundary.

Frequently asked questions

Can I capture a YouTube or third-party iframe?

Not directly when it is cross-origin. The browser blocks access to its document.

What happens to inaccessible frames?

Enable placeholders to preserve their layout while making the unavailable content explicit.

Capture it in the browser

Install SnapDOM and turn the DOM your users already see into a portable image.

Open the demo Install from npm