How to Embed a PDF in HTML

For a browser-native PDF preview, use an <iframe>. Give it a descriptive title, set a height that works for your page, and put a direct link to the PDF outside the frame. The link remains useful when the browser cannot display the PDF or the reader prefers to open or download it separately.

<iframe
  src="/files/guide.pdf"
  title="Product guide (PDF)"
  width="100%"
  height="600">
</iframe>
<p><a href="/files/guide.pdf">Open or download the product guide (PDF)</a></p>

Replace /files/guide.pdf with the PDF’s deployed URL. The example height is a starting point, not a universal size; check the page on the browsers and devices your audience uses.

1. Choose the right HTML element

All three elements below can be used to embed content, but they do not offer the same fallback behavior. For a PDF preview, MDN’s guidance favors <iframe> when its controls are useful; choose <object> when you need fallback markup inside the element. <embed> offers no advantage for this use.

Element	When to choose it	Fallback and practical details
`<iframe>`	A straightforward preview in the browser’s built-in PDF viewer.	Has no child-content fallback, so add a separate PDF link. Supports iframe options such as `loading` and `referrerpolicy`.
`<object>`	You want fallback HTML inside the embed.	Child content can tell readers what to do if the preview is unavailable.
`<embed>`	Only when a specific integration calls for it.	Has no fallback content. For a PDF preview, MDN identifies no advantage over the other choices.

Use an iframe for the general case

An iframe creates a nested browsing context in which a browser’s PDF viewer can display the document. Keep the link outside it: content nested in an iframe is not a fallback that appears when the browser cannot render the PDF.

Use object when inline fallback markup matters

<object data="/files/guide.pdf" type="application/pdf" width="100%" height="600">
  <p>PDF preview unavailable. <a href="/files/guide.pdf">Open or download the PDF</a>.</p>
</object>

The browser can display the document when it supports the PDF handler. Otherwise, the child paragraph and link provide fallback content.

When embed is not the best choice

<embed> has no fallback children. If you do use it, provide a descriptive title and a separate link. For a typical PDF preview, an iframe provides useful controls and an object can provide fallback markup.

2. Configure the iframe for your page

The core iframe attributes are the PDF URL, a meaningful title, and dimensions. Add optional attributes only when they match the page’s behavior and privacy requirements.

Attribute	What it does	When to use it
`src`	Points to the PDF resource.	Use a path or URL that works from the deployed page. A local development path may not match the production location.
`title`	Names the embedded content for people using assistive technology.	Use a concise document-specific title, such as `Product guide (PDF)`, rather than just “PDF.”
`width` and `height`	Set the frame’s dimensions.	`width="100%"` can fill its container. Choose a usable height and check small screens.
`loading`	Controls when the browser loads the iframe.	Consider `loading="lazy"` when the preview is below the fold and need not load immediately.
`referrerpolicy`	Controls referrer information sent for the iframe navigation.	Set a policy that fits your site’s privacy and compatibility needs.

For example, a deferred preview can use:

<iframe
  src="/files/guide.pdf"
  title="Product guide (PDF)"
  width="100%"
  height="600"
  loading="lazy"
  referrerpolicy="no-referrer">
</iframe>
<p><a href="/files/guide.pdf">Open or download the product guide (PDF)</a></p>

loading="lazy" may delay loading until the frame approaches the viewport; omit it if the preview should appear immediately or if deferred loading conflicts with how your page is used. The example referrer policy suppresses the referrer for this navigation. Select the policy deliberately, especially if the document host relies on referrer information.

3. Make the PDF usable for more readers

Give the frame a descriptive title so assistive technology users can identify its contents. Put a normal link beside or below the preview so readers can open the document separately or download it. The link also covers the case where an embedded viewer is unavailable.

PDF viewers can be difficult to operate on a small screen, and the PDF itself may have accessibility limitations. If readers need to use the content on phones, search it, or navigate it with assistive technology, consider presenting the important material as an HTML page and retaining the PDF as an alternate format.

4. Set Content Security Policy for the chosen element

If your site uses Content Security Policy (CSP), allow the PDF in the directive for the element you chose:

For an iframe, check frame-src.
For object or embed, check object-src.

A policy that sets object-src 'none' blocks object and embed resources. Under that policy, iframe is the viable choice among these three elements, provided the site’s frame-src policy allows the PDF’s origin. Align the policy with the actual host of the document; a PDF served from another origin may need to be named explicitly.

5. Avoid sandboxing a native PDF iframe as a generic fix

Do not add the iframe sandbox attribute to a native PDF preview as a general security measure. It can prevent the browser’s built-in PDF viewer from loading, and it is not a portable way to restrict a native preview. MDN notes that browser PDF renderers already sandbox executable content. If a sandbox is required for another kind of embedded application, evaluate that integration separately rather than assuming the PDF viewer will keep working.

6. Troubleshoot common problems

Symptom	Likely cause	What to check
The frame is blank or shows an error.	The PDF URL is wrong, inaccessible, or blocked by policy.	Open the PDF URL directly, check the deployed path and access controls, and inspect CSP’s `frame-src` rule.
The viewer disappears after adding `sandbox`.	The browser’s native PDF viewer does not work with that sandbox configuration.	Remove the generic sandbox attribute for the native PDF preview and retest.
The PDF opens directly instead of appearing in the frame.	Browser or server behavior may prefer opening or downloading the file, or the browser may not provide an inline PDF viewer.	Keep the direct link, test the actual deployed PDF URL and target browsers, and provide an HTML alternative for essential content.
Object works locally but is blocked in production.	CSP may disallow object content.	Check `object-src`. If it is `'none'`, use an iframe if allowed by `frame-src`.
Screen reader users cannot tell what is embedded.	The iframe or embed lacks a useful title.	Add a concise, document-specific `title`.
The preview is hard to use on a phone.	The fixed height or PDF viewer is awkward in a small viewport.	Adjust the frame size and test on small screens; consider an HTML version or a separate-document link.
Lazy preview does not appear immediately.	`loading="lazy"` defers loading until the frame is near the viewport.	Scroll the frame into view, or remove lazy loading when immediate display is required.

7. Performance, reliability, and cost considerations

Embedding a PDF loads a document and its viewer in addition to the surrounding page. For previews far below the fold, lazy loading can defer that work. Keep a direct link available so readers can open the PDF on its own if the embedded viewer is slow or unsupported. Test the published URL on the browsers and devices that matter to your audience; viewer behavior varies.

For a static PDF, an HTML iframe does not produce a screenshot image of the page. If your goal is instead to capture a web page as an image or PDF, an API can handle the browser capture for you. ScreenshotNeo is a website screenshot API and MCP server for developers: it accepts one GET request with a URL and returns a PNG, JPEG, WebP, or PDF. Its capture options include full-page capture and PDF settings such as paper size, margins, landscape, and page ranges. See ScreenshotNeo and the API documentation.

Or skip the browser setup

If you want a screenshot or PDF of a web page rather than an inline preview of an existing PDF, call ScreenshotNeo directly:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, and failed loads are never billed, and response headers say which page verdict occurred and whether it was billed. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Frequently asked questions

Can I embed a PDF from another domain?

Use its full URL as the iframe’s src and check your site’s CSP. The document host and browser behavior can affect whether the embedded preview works, so test the published page and retain a direct link.

Should the link open in a new tab?

That is a page-design choice. A normal link lets readers choose how to open the document; clearly label it as an option to open or download.

Does embedding a PDF make its contents accessible?

No. A descriptive iframe title identifies the embedded document, but it does not fix accessibility issues inside the PDF. Provide an accessible HTML alternative when the document’s contents must be broadly usable.

Can I use this markup to turn an HTML page into a PDF?

No. The iframe displays an existing PDF URL. To create a PDF from a web page, use a browser print flow or a page-capture service that supports PDF output.