{"id":2794,"date":"2026-06-18T17:21:12","date_gmt":"2026-06-18T17:21:12","guid":{"rendered":"https:\/\/gopdf.io\/blog\/?p=2794"},"modified":"2026-06-18T17:22:03","modified_gmt":"2026-06-18T17:22:03","slug":"embed-a-pdf-in-html","status":"publish","type":"post","link":"https:\/\/gopdf.io\/blog\/embed-a-pdf-in-html\/","title":{"rendered":"Embed a PDF in HTML"},"content":{"rendered":"

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.<\/p>\n

How Browsers Display PDFs<\/h2>\n

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\u2019t render inline PDFs well and instead prompt a download or open a separate viewer. This single fact shapes every embedding decision \u2014 a method that looks perfect on a laptop may simply show a download link on a phone.<\/p>\n

Method 1: The <iframe> Tag (most common)<\/h2>\n

An iframe loads the PDF as an embedded frame and is the most widely used approach:<\/p>\n

<iframe src=”document.pdf” width=”100%” height=”600px”><\/iframe><\/p><\/blockquote>\n

It\u2019s simple, well-supported on desktop, and lets you control dimensions. You can append viewer parameters to the URL (such as #page=2<\/em> or #zoom=100<\/em>) to open at a specific page or zoom level. The weakness is inconsistent mobile rendering.<\/p>\n

Method 2: The <embed> Tag<\/h2>\n

The embed element is purpose-built for external content:<\/p>\n

<embed src=”document.pdf” type=”application\/pdf” width=”100%” height=”600px”><\/p><\/blockquote>\n

It behaves similarly to an iframe and is concise, but it\u2019s a self-closing element with no fallback content of its own, so it offers less graceful handling when a browser can\u2019t display the PDF.<\/p>\n

Method 3: The <object> Tag (with fallback)<\/h2>\n

The object element\u2019s advantage is built-in fallback content for browsers or devices that can\u2019t render the PDF:<\/p>\n

<object data=”document.pdf” type=”application\/pdf” width=”100%” height=”600px”><p>Your browser can\u2019t display this PDF. <a href=”document.pdf”>Download it instead.<\/a><\/p><\/object><\/p><\/blockquote>\n

Because you can nest a download link inside, mobile users who can\u2019t view inline still get a working path to the file. This makes object<\/em> the most resilient choice for a general audience.<\/p>\n

A Practical Decision Workflow<\/h2>\n
    \n
  1. Need the simplest desktop embed? Use an iframe<\/em> and set explicit width\/height.<\/li>\n
  2. Want graceful degradation for phones and old browsers? Use object<\/em> with a nested download link.<\/li>\n
  3. Want to open at a specific page or zoom? Append viewer parameters to the file URL.<\/li>\n
  4. Care most about identical experience everywhere? Consider a JavaScript PDF rendering library that draws the document to a canvas, sidestepping native-viewer differences.<\/li>\n
  5. Always provide a visible download link as a fallback, regardless of method.<\/li>\n<\/ol>\n

    Common Mistakes and Edge Cases<\/h2>\n