Why Embedding a PDF Beats Linking to It
A plain download link forces the visitor to leave your page, open the file in a separate viewer, then find their way back. That breaks reading flow, especially on mobile. Embedding the PDF lets readers consume the content without ever navigating away.
Embedded PDFs also give you more control. You can set the visible height, disable the toolbar, and keep the document inside your brand's layout. For things like menus, brochures, white papers, or terms of service, this is almost always the better experience.
The tradeoff is that you need the PDF hosted at a stable, publicly accessible URL before you can embed it. If your PDF lives on a local drive or behind a login wall, the embed will either fail silently or show a blank box. We'll cover hosting options later in this article.
Method 1: The HTML <embed> Tag (Quickest Option)
The `<embed>` tag is the most concise way to drop a PDF into a page. It requires just one line of HTML and works in all modern browsers without any JavaScript or third-party plugin.
Here's the basic syntax: `<embed src="https://yourhost.com/file.pdf" type="application/pdf" width="100%" height="600px" />` Set `width` to `100%` so the viewer scales with the container, and adjust `height` to match how much vertical space you want to give it. A value between 500px and 800px works well for most layouts.
The limitation: if a visitor's browser doesn't have a built-in PDF viewer (some mobile browsers don't), they'll see nothing — or get prompted to download. The `<embed>` tag has no fallback slot. For a more resilient solution, use the `<object>` method below.
Method 2: The <object> Tag (Best for Fallback Support)
The `<object>` tag does everything `<embed>` does, but lets you define fallback content inside it. If the browser can't render the PDF inline, it displays whatever HTML you put between the opening and closing tags.
Here's the pattern: ```html <object data="https://yourhost.com/file.pdf" type="application/pdf" width="100%" height="600px"> <p>Your browser can't display this PDF. <a href="https://yourhost.com/file.pdf">Download it instead.</a></p> </object> ``` The fallback link means no visitor ever hits a dead end. This is the method to use when you can't control what device or browser your audience uses — think public-facing websites, educational portals, or government forms.
You can also nest an `<embed>` inside the `<object>` for even broader compatibility, though in practice modern browsers handle `<object>` cleanly on their own.
Method 3: An iframe Embed (Most Flexible for Styling)
The `<iframe>` tag is the most style-friendly option. Because iframes are a general-purpose container, you get full CSS control over borders, border-radius, box shadows, and responsive sizing. Many developers prefer it for this reason alone.
The PDF embed code looks like this: ```html <iframe src="https://yourhost.com/file.pdf" width="100%" height="700px" style="border: none;"></iframe> ``` Dropping `border: none` removes the default iframe border that looks out of place on modern designs. You can also wrap the iframe in a `div` with `overflow: hidden` and `border-radius` to match your site's card style.
One nuance: some browsers append `#toolbar=0` to the URL to hide the PDF viewer's native toolbar. Add it to your `src` like `file.pdf#toolbar=0&navpanes=0` if you want a cleaner, more embedded look. This is a browser hint, not a guaranteed behavior — Chrome and Edge respect it; Firefox may not.
How to Host Your PDF Before You Embed It
Every embedding method above requires your PDF to live at a public URL. If you're building on a CMS like WordPress or Webflow, you can upload the file to your media library and grab the URL. But that URL can change if you migrate hosts or rename the file — and a broken src means a broken embed.
A dedicated file host gives you a permanent, stable URL. With Foldr's free PDF hosting, you can upload files up to 2GB without creating an account and get a permanent link that never expires. Paste that link directly into your embed code and it'll still work years from now — even if you switch website platforms entirely.
For teams publishing PDFs regularly — think monthly reports, updated pricing sheets, or product catalogs — Foldr's swappable file feature on Pro plans lets you replace the file behind the same URL. The embed on your website stays intact; visitors automatically see the new version. No need to update the code.
- Free tier: up to 2GB per file, no account required, permanent link
- Pro: 20GB permanent storage, swappable files (update the file, keep the URL)
- Foldr Spaces: team storage from 5GB to 100GB for shared PDF libraries
- Password-protected links if the PDF shouldn't be publicly accessible
Making Your PDF Embed Responsive on Mobile
A fixed-height iframe or embed looks fine on desktop but often breaks on small screens. The fix is to wrap the embed in a responsive container that scales by aspect ratio.
Here's a CSS approach that works for all three tag types: ```css .pdf-container { position: relative; width: 100%; padding-top: 129%; /* roughly A4 aspect ratio */ overflow: hidden; } .pdf-container embed, .pdf-container iframe, .pdf-container object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } ``` Then wrap your embed tag in `<div class="pdf-container">`. The PDF will scale proportionally on any screen size.
That said, even a perfectly responsive embed can feel cramped on a 375px-wide phone screen. For mobile-first audiences, consider showing a thumbnail image with a 'View PDF' button that opens the file in the device's native viewer. It's a better experience on small screens than a pinch-to-zoom inline viewer.
Automating PDF Embeds with the Foldr API
If you're publishing PDFs programmatically — generating invoices, reports, or certificates on the fly — manually uploading and embedding each one doesn't scale. You need a pipeline that uploads the file and returns a URL you can immediately drop into your embed code.
Foldr's developer API at /api/v1 handles programmatic uploads with a single POST request. Your backend generates the PDF, sends it to Foldr, and receives a permanent URL in the response. You then write that URL into your page's embed tag dynamically. The whole process can run in under a second.
If you use automation platforms, Foldr also integrates with Zapier, n8n, and Make.com, so you can trigger uploads from form submissions, CRM events, or scheduled workflows — all without writing custom code.
Security and Access Control for Embedded PDFs
Embedding a PDF at a public URL means anyone who discovers that URL can access the file directly — not just visitors who find it through your embed. For public-facing content like menus or brochures, this is fine. For sensitive documents, it's worth thinking through.
Foldr supports password-protected links, so you can require a passphrase before anyone accesses the file. Note that password protection works best when you link to the file rather than embed it, since the browser's PDF viewer can't handle an auth challenge mid-embed. For sensitive internal documents, consider gating them behind your own login before the embed renders.
Foldr also offers link expiration and self-destructing links — useful when you want a PDF available for a limited campaign window or a time-sensitive offer. After the expiry, the URL returns nothing, so any embedded viewer on your page will show an empty frame. Plan for this by either updating the embed URL or removing the embed when the window closes.
Frequently Asked Questions
Which HTML tag is best for embedding a PDF — embed, object, or iframe?
All three work in modern browsers, so the choice comes down to your priorities. Use `<embed>` for simplicity when you're confident your audience uses capable browsers. Use `<object>` when you need a fallback for unsupported browsers. Use `<iframe>` when you need the most CSS styling flexibility.
Why is my embedded PDF showing a blank white box?
The most common cause is that the PDF URL isn't publicly accessible — it may be behind a login, on localhost, or the path is wrong. Open the PDF URL directly in a new browser tab to confirm it loads. Also check that your server is serving the file with the correct MIME type: `application/pdf`.
Can I embed a PDF without hosting it somewhere?
Not with a reliable inline embed. All HTML embed methods require a publicly reachable URL. You could encode a small PDF as a base64 data URI and use that as the src, but this inflates page size significantly and isn't practical for real-world documents.
How do I hide the PDF toolbar (download button, print button) in the viewer?
Append `#toolbar=0` to your PDF URL in the src attribute, like `src="file.pdf#toolbar=0"`. This works in Chromium-based browsers (Chrome, Edge, Brave) but Firefox and Safari may ignore it. There's no universal way to fully suppress the native viewer controls across all browsers.
Will the PDF embed still work if I update the file?
Only if the URL stays the same. If you re-upload to a new path, you'll need to update the embed code on your site. Foldr's Pro plan includes swappable files, which let you replace the file behind an existing URL — so your embed code never needs to change even when the document content does.
Can I embed a password-protected PDF inline on my page?
Generally no. Password-protected files require user interaction before the content is served, and the browser's built-in PDF viewer can't present that challenge inside an embed or iframe. For protected content, it's better to link to the file directly and let the viewer handle authentication.
Pick the embedding method that matches your audience's devices — `<object>` with a fallback for maximum compatibility, or `<iframe>` if styling control matters more. Then get your PDF hosted at a permanent URL before you write a single line of embed code; that's the step most people skip and then wonder why their embed breaks six months later. If you haven't hosted your file yet, upload it to Foldr now and grab a permanent link in under a minute.