Embedding a PDF in a web page means displaying the document inline visitors read it without leaving the page or downloading a file. HTML offers a few native ways to do this, each with different tradeoffs in control, compatibility, and mobile behavior. The right choice depends on how much you care about consistent rendering across devices, because browsers handle inline PDFs less uniformly than people expect.
How Browsers Display PDFs
Most desktop browsers include a built-in PDF viewer, so an embedded PDF renders directly in the page. Mobile browsers are the complication: many don’t render inline PDFs well and instead prompt a download or open a separate viewer. This single fact shapes every embedding decision — a method that looks perfect on a laptop may simply show a download link on a phone.
Method 1: The <iframe> Tag (most common)
An iframe loads the PDF as an embedded frame and is the most widely used approach:
<iframe src=”document.pdf” width=”100%” height=”600px”></iframe>
It’s simple, well-supported on desktop, and lets you control dimensions. You can append viewer parameters to the URL (such as #page=2 or #zoom=100) to open at a specific page or zoom level. The weakness is inconsistent mobile rendering.
Method 2: The <embed> Tag
The embed element is purpose-built for external content:
<embed src=”document.pdf” type=”application/pdf” width=”100%” height=”600px”>
It behaves similarly to an iframe and is concise, but it’s a self-closing element with no fallback content of its own, so it offers less graceful handling when a browser can’t display the PDF.
Method 3: The <object> Tag (with fallback)
The object element’s advantage is built-in fallback content for browsers or devices that can’t render the PDF:
<object data=”document.pdf” type=”application/pdf” width=”100%” height=”600px”><p>Your browser can’t display this PDF. <a href=”document.pdf”>Download it instead.</a></p></object>
Because you can nest a download link inside, mobile users who can’t view inline still get a working path to the file. This makes object the most resilient choice for a general audience.
A Practical Decision Workflow
- Need the simplest desktop embed? Use an iframe and set explicit width/height.
- Want graceful degradation for phones and old browsers? Use object with a nested download link.
- Want to open at a specific page or zoom? Append viewer parameters to the file URL.
- Care most about identical experience everywhere? Consider a JavaScript PDF rendering library that draws the document to a canvas, sidestepping native-viewer differences.
- Always provide a visible download link as a fallback, regardless of method.
Common Mistakes and Edge Cases
- Assuming mobile renders inline: many mobile browsers won’t. Always include a download fallback.
- No fallback content: iframe and embed show nothing useful when the viewer fails; object lets you supply an alternative.
- Cross-origin restrictions: a PDF hosted on another domain may be blocked from embedding by security headers (such as X-Frame-Options).
- Large files on slow connections: a heavy PDF embedded inline delays page load. Compress pdf or lazy-load the embed.
- Fixed pixel heights: a hard-coded height clips short documents and crowds long ones. Use responsive sizing where possible.
- Accessibility: embedded PDFs should still be reachable as a direct link, and the PDF itself should be tagged for screen readers.
Frequently Asked Questions
Which tag should I use to embed a PDF?
Use iframe for simplicity on desktop, or object when you want a fallback download link for browsers and phones that can’t render inline PDFs.
Why doesn’t my embedded PDF show on mobile?
Many mobile browsers don’t support inline PDF rendering and offer a download instead. Provide a download link as a fallback.
Can I open the PDF at a specific page?
Yes. Append viewer parameters to the URL, such as #page=3 or #zoom=100, supported by most built-in viewers.
Why is my embedded PDF blocked?
The host may send security headers that prevent framing across domains. Host the PDF on the same domain or adjust the server’s framing policy.
