How to Embed a PDF in HTML (Working Code)

Quick answer: use an <iframe> pointing at the PDF's URL, with a width, height and a fallback link. If you do not host the file, upload it to SharePDF, which gives an iframe embed code on every plan, free included. The embed PDF tool can generate it.

Option 1: iframe

<iframe
    src="https://example.com/files/report.pdf"
    width="100%"
    height="600"
    style="border: 0"
    title="Annual report PDF"
></iframe>

This is the simplest way. The browser shows its own PDF viewer inside the frame.

Option 2: object, with a fallback

<object
    data="https://example.com/files/report.pdf"
    type="application/pdf"
    width="100%"
    height="600"
>
    <p>
        Your browser cannot show this PDF.
        <a href="https://example.com/files/report.pdf">Open it here</a>.
    </p>
</object>

The text inside <object> appears when the browser cannot display the PDF, so readers always get a way in.

Option 3: embed

<embed
    src="https://example.com/files/report.pdf"
    type="application/pdf"
    width="100%"
    height="600"
/>

It works like object but has no fallback content.

Which one to use

Tag	Fallback content	Notes
`iframe`	No (add a link below it)	Most common, easy to style
`object`	Yes	Good when you need a fallback
`embed`	No	Short, but least flexible

Embed without hosting the file

Upload your PDF to SharePDF.
In your dashboard, open the PDF's menu, choose Embed, and select Copy code.
Paste the iframe into your page, blog, Notion-style editor or CMS that accepts HTML.

The embed shows the SharePDF viewer, and views count in your dashboard. Replace the PDF later and the embed updates without touching your page. SharePDF does not add a watermark, and the embed is not DRM. See the embed PDF tool or PDF link sharing.

Things that go wrong

The PDF is blocked. Some sites tell browsers not to display their pages in frames. If your frame is blank, check the browser console, or host the file elsewhere.
Mobile shows a download button or one page. Several mobile browsers handle embedded PDFs differently. Put a plain link under the embed.
The page loads slowly. Large PDFs slow your page. Keep files small or load the iframe only when needed with loading="lazy".
Mixed content. Use https URLs on https pages.

Add a link as backup:

<p>
    <a href="https://example.com/files/report.pdf">Open the PDF in a new tab</a>
</p>

Accessibility

Give the iframe a title, and make sure the PDF itself has real text, not scanned images, so screen readers can read it.

Where to find the embed code

In your SharePDF dashboard, open the PDF's menu and choose Embed. On a PDF's detail page there is also an Embed button. A dialog titled Embed PDF shows the code. Choose Copy code and paste it into your page. The snippet is an iframe with width 100% and height 700, which you can change. It points to an embed address based on the PDF's share link.

The dialog notes that the embed uses the same access settings as your PDF, so private or expired PDFs do not show to public viewers. Replace the file later and the embed keeps working. The old file is deleted, so keep your own copy.

Worked example

Jo runs a small bakery site and wants the menu on the page.

She uploads menu.pdf to SharePDF.
She opens the PDF's menu, chooses Embed and copies the code.
In her site builder she adds a Custom HTML block and pastes it.
She adds a plain text link under it: "Open the menu in a new tab".
She checks the page on her phone and desktop.

When prices change, she replaces the PDF in SharePDF. The page needs no edit.

Make the embed responsive

A fixed height can look wrong on small screens. Wrap the iframe and set the height with CSS.

<div style="width: 100%; max-width: 900px; margin: 0 auto">
    <iframe
        src="https://example.com/files/report.pdf"
        title="Report"
        style="width: 100%; height: 80vh; border: 0"
    ></iframe>
</div>

Troubleshooting

Problem	Fix
Blank frame	The source may refuse framing, or the URL is wrong. Open it in a tab
Download prompt instead of preview	The browser or device does not show PDFs inline. Add a link below
The PDF does not update	Cached copy. Reload, or clear the cache
Page is slow	Reduce the PDF size, or add `loading="lazy"`
Content Security Policy error	Your site blocks framing other origins. Allow the source in your frame rules

See the embed PDF tool, PDF to link, and the guides on creating a link to a PDF and PDF menu vs website menu.

FAQ

Can I embed a PDF in WordPress?

Yes. Use a Custom HTML block and paste the iframe.

Can I embed a Google Drive PDF?

Possibly, depending on your Drive sharing settings, but a hosted PDF link with an iframe embed code is more predictable.

Can I stop people downloading an embedded PDF?

You can hide the obvious download button. Text can still be copied and screenshots work, so do not rely on it for secrets.

Is embedding free on SharePDF?

Yes. The iframe embed code is on every plan, including free.

How do I make an embedded PDF full width?

Set width="100%" on the iframe and avoid a fixed-width parent.

Does embedding a PDF hurt page speed?

It can. A large PDF loads inside the frame, so keep files small and consider lazy loading.