How to embed a PDF on your website without it looking terrible

Almost every embedded PDF I see on a website is broken on a phone. Not slightly awkward — actually broken. A grey rectangle, or a download prompt, or a document rendered so small the text is a smudge.

The people who built these pages aren’t careless. They tested it, it looked fine, they shipped it. It looked fine on a laptop. That’s the whole story.

Why the usual methods fail

The iframe pointing at a .pdf

<iframe src="/brochure.pdf" width="100%" height="600"></iframe>

Two lines, works instantly, and it’s the single most common way this goes wrong. Most mobile browsers do not render a PDF inside an iframe. iOS Safari in particular will show you nothing useful. Depending on the browser you get a blank box, a download, or a viewer that ignores your dimensions entirely.

It also has a fixed height, which means it is by definition wrong on every screen except the one you designed it for.

Google Docs Viewer / Office viewer trick

Passing your PDF through a third-party viewer works, right up until it doesn’t. You’ve made your page depend on someone else’s free service rendering your document, you’ve handed them the file, and you have no control over what the viewer looks like or whether it exists next year.

“Just link to it”

Perfectly respectable. But then it isn’t embedded, is it — the person leaves your page, lands in a PDF viewer, and you’ve lost them. If a link is genuinely fine for your use case, do that and stop reading. If you wanted them to stay, keep going.

What actually works

1. Render the PDF as pages, not as a file

The reliable approach is to stop embedding the file and start embedding the content. Convert each page to an image, and present them in a viewer that behaves like a web page — because it is one.

This is what a flipbook embed does. The browser is no longer being asked to render a PDF; it’s being asked to render images and text, which is a thing it has never once failed to do. That’s why it works on a phone.

2. Make it responsive, not fixed

The single biggest visual improvement, whatever method you choose. A fixed height="600" is a guess that’s wrong everywhere. Use an aspect-ratio wrapper so it scales:

<div style="position:relative; width:100%; padding-top:66%;">
  <iframe src="…" style="position:absolute; inset:0; width:100%; height:100%; border:0;"
          loading="lazy" allowfullscreen></iframe>
</div>

And on a narrow screen, show one page at a time. A two-page spread shrunk to fit a phone is unreadable, and that single decision is the difference between an embed people use and one they scroll past.

3. Lazy-load it

loading="lazy" on the iframe. A document embed is usually below the fold and always heavy. Loading it eagerly means your page’s Largest Contentful Paint is now hostage to a document nobody has scrolled to yet.

The bit nobody mentions: your embed is invisible to Google

Here’s the trap. You embed a 40-page catalogue full of product names, specs and copy. Thousands of words. And your page ranks for none of them — because the words are inside a file (or inside images), not inside your HTML.

Google can index a standalone PDF. It’s much less interested in text buried in an iframe on your page, and it can’t read words that only exist as pixels.

So if the content is worth ranking for, it has to exist as text in the page. The practical version: pick an embed that extracts the document’s text as well as displaying it, and put a real summary in the page around it. An embed with a paragraph of actual copy above it will out-rank a bare embed every time.

A quick checklist

• Open it on a phone. An actual phone, not a resized browser window.
• Does it scale, or is the height fixed?
• Does it show one page on narrow screens?
• Is it lazy-loaded?
• Can you search the text inside it? If not, neither can Google.
• Does it still work if the third-party service you’re leaning on goes down?

If you get five of those six, you’re ahead of nearly every site I look at.

---

Living Page gives you a responsive, mobile-aware embed snippet with the document text extracted — one line, and it doesn’t fall over on a phone. Try it free.