Embedding PDF files in HTML

Embed using iframe tag

If you want to add a PDF file to your website, there are a couple of ways you can do it. One way is to use the iframe tag. You can add an iframe tag with the source URL of your PDF file:
<iframe src="source url"></iframe>

You can set the width and height attributes to adjust the size of the frame:
<iframe width="640" height="480" src="source url"></iframe>

If you want to make the frame full width, you can set the width value to 100%:
<iframe width="100%" height="480" src="source url"></iframe>

Another option to share your PDF file is by using it as a link. This means that when someone clicks on the link, the PDF file will open for them to view. It's a simple and straightforward way to share your PDF with others.
<a href="source url">PDF file</a>

If you want the link to open in a new tab, you can set the target attribute as "_blank" or "blank":
<a target="_blank" href="source url">PDF file</a>
<a target="blank" href="source url">PDF file</a>

  • _blank: every time someone clicks on the link, it will open in a new tab.
  • blank: the first time someone clicks on the link, it will open in a new tab. However, any subsequent links that person clicks on will also open in the same newly-opened tab. This can be handy if you want to keep related links together in the same tab.

Other embedding options

We used to be able to embed a PDF in HTML using <embed> or <object> tags, but these options are now deprecated. It's recommended that we don't use these tags anymore, as they may not work properly or may cause compatibility issues with newer web browsers.

Tool: PDF file URL to HTML iframe embed code

To generate the embed code for your PDF file, you can simply copy and paste the file's URL into the following input field. Once you've done that, the code will be generated for you automatically.

Output

You can minify, beautify or encode the generated HTML code using this tool.

How to share a PDF file on Google Drive and embed it in HTML

If you want to embed a PDF file on your HTML document using Google Drive, you can follow these simple steps:

  • Open the folder on Google Drive where the PDF file is located.
  • Right-click on the PDF file and select the "Share" option from the menu that appears. Google Drive - Share
  • Choose "Anyone with the link" for "General access" and "Viewer" for "Role". This will give view access to anyone who has the link to the PDF file. Google Drive - Anyone with the link
  • Close the "Share" window and double-click the PDF file to open the preview.
  • Click the three dots at the top-right corner and select "Embed item..." from the menu that appears.
    If the "Embed item..." option is not available, select "Open in new window" and click the three dots again. Google Drive - Embed item...
  • Copy the HTML code that is generated and paste it into your HTML document. Google Drive - Paste HTML to embed in website
  • [optional] Adjust the width and height attributes to change the size of the embedded PDF file.

Embed code looks like this:

<iframe
  src="https://drive.google.com/file/d/1CY41ejaMLQAA2IO6PR0GQOteDt4t-6xP/preview"
  width="640"
  height="480"
  allow="autoplay"
></iframe>

Don't worry if you don't have the embed code for your PDF file but have a Google Drive share link that looks like this: https://drive.google.com/filepath/view?usp=share_link

You can still embed it by replacing the last part of the link, which says "/view?usp=share...", with "/preview".

And voila! Your embed code will look like this:

<iframe
  src="https://drive.google.com/filepath/preview"
  width="100%"
  height="480"
  allow="autoplay"
></iframe>

Or you can use this tool to automatically convert your URL into an embed code.

Embedding a PDF file in your Blogger post

Here's what the embedded PDF file looks like: