How to Embed PDF in HTML?

PDFs are still the go-to format for manuals, invoices, academic papers, and spec sheets. Developers often need to show a PDF inline on a page without forcing a download, and the web platform gives you a few native options to do exactly that. 

Hi folks,
What is the most reliable approach to embedding a PDF in HTML so that it works across modern browsers and mobile devices? I’d like to display the PDF inline with a toolbar for zooming and paging, while also providing a graceful fallback if the browser can’t display it. It should remain responsive and accessible, and ideally I’d also like to generate a quick image preview of the first page. I’m looking for code snippets and best practices.Thanks!

Great question! You have three native HTML options and a few practical patterns that cover most use cases. Start with the simplest, then add fallbacks and previews.

<iframe
  src="/docs/handbook.pdf#view=FitH&toolbar=1"
  width="100%"
  height="600"
  title="Handbook PDF"
  loading="lazy"
  style="border: 0;"></iframe>Code language: HTML, XML (xml)

• Fragment options like #view=FitH, #zoom=page-width, #toolbar=0, and #navpanes=0 let you tweak the built-in viewer.
• Set title for accessibility and loading=”lazy” for performance.

<embed
  src="/docs/handbook.pdf"
  type="application/pdf"
  width="100%"
  height="600"
/>Code language: HTML, XML (xml)

<embed> is simple but offers fewer controls than an iframe. It works well in desktop browsers, while some mobile browsers prefer handing off to a native viewer.

<object
  data="/docs/handbook.pdf#zoom=page-width"
  type="application/pdf"
  width="100%"
  height="600">
  <p>Your browser cannot display PDFs inline.
    <a href="/docs/handbook.pdf" download>Download the PDF</a>.</p>
</object>Code language: HTML, XML (xml)

With this, if the browser can’t render the PDF for any reason, users still get a download link.

/* Ensure parent controls size */
.pdf-frame {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.pdf-frame iframe,
.pdf-frame embed,
.pdf-frame object {
  width: 100%;
  height: 70vh; /* scales with viewport */
}Code language: CSS (css)

For performance, show a preview of page 1 and open the PDF on click. If you render a PDF page to an image, use the standard HTML image tag best practices.

<a href="/docs/handbook.pdf" aria-label="Open the handbook PDF">
  <img
    src="/docs/handbook-preview.jpg"
    alt="Preview of the handbook PDF"
    width="800"
    height="1132"
    loading="lazy" />
</a>Code language: HTML, XML (xml)

• Content type: serve with Content-Type: application/pdf.
• Embedding policy: if embedding across origins, configure Content Security Policy frame-ancestors ‘self’ https://your-site.example. Avoid using restrictive X-Frame-Options that block embedding.
• CORS: if your PDF lives on a different domain and you use programmatic viewers, ensure appropriate Access-Control-Allow-Origin headers.

• Use a JS viewer like PDF.js if you need consistent controls, search, text selection, and annotations across browsers. This adds weight but gives full control.
• Convert pages to images for predictable layout and fast previews, then link out to the full PDF.

• Use a CDN for the PDF file to reduce latency and improve cache hit rates. See this overview of hosting and delivery considerations.
• Cache aggressively with immutable URLs and versioned file names so you can update without breaking embeds.

If you manage many PDFs and related media assets, Cloudinary can host and deliver your PDFs via a fast CDN, and also generate page previews on the fly.

• Quick embed of a hosted PDF:

<iframe
  src="https://res.cloudinary.com/demo/image/upload/sample.pdf"
  width="100%"
  height="600"
  style="border:0"
  title="Sample PDF"></iframe>Code language: HTML, XML (xml)

• Generate a first-page preview image dynamically for better LCP:

<img
  src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,pg_1,w_900/sample.pdf"
  alt="Preview of Sample PDF"
  loading="lazy"
  width="900" />Code language: HTML, XML (xml)

The URL transforms the first page to an optimized image. You can request different widths to serve responsive previews.

• Link the preview to the full PDF:

<a href="https://res.cloudinary.com/demo/image/upload/sample.pdf">
  <img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,pg_1,w_600/sample.pdf"
       alt="Open Sample PDF" />
</a>Code language: HTML, XML (xml)

• Use an iframe to embed PDFs quickly, with object as a resilient alternative and a fallback link for downloads.
• Keep it responsive with CSS, add lazy loading, and serve the correct content type.
• For fast UX, generate a first-page image preview and link to the full PDF.
• Host on a CDN and use versioned URLs for caching. Cloudinary can host PDFs, generate previews on the fly, and deliver them efficiently.

• Digital Asset Management Guide
• Convert images to PNG
• JPG to WebP Converter
• PNG to WebP Converter

Ready to streamline PDF previews, hosting, and delivery at scale? Sign up for a free Cloudinary account and start building faster, more reliable PDF experiences.