How to embed PDF in HTML & make it responsive?

You can embed a PDF file in an HTML document using the <embed>, <iframe> or <object> tag. See the examples below.

Embed PDF using the <embed> tag

<embed src="path/to/your.pdf" width="800" height="500" type='application/pdf'>

However, to make it mobile responsive, write the following CSS.

embed {
  width: 100%;
}

This will add a horizontal scrollbar to the smaller screens. On the desktop, it looks like the following screenshot.

You can do the same with iframe & object tags.

Using iframe tag

<iframe src="path/to/your.pdf" width="800" height="500"></iframe>

iframe {
  width: 100%; /* for responsiveness */
}

Using object tag

<object data="path/to/your.pdf" type="application/pdf" width="800" height="500">
  <p>It appears you don't have a PDF viewer for this browser.
  No biggie... you can <a href="path/to/your.pdf">click here to
  download the PDF file.</a></p>
</object>

object {
  width: 100%; /* for responsiveness */
}

Embedding PDF with the object tag has an extra advantage. If someone’s browser does not have a built-in PDF viewer, he/she can see a custom message and download the PDF.

See a live example below:

You got all three examples. And you knew how to make the PDF embed mobile responsive.

If you want to include the PDF in WordPress, Elementor, or Divi, you can follow the same process. That means you have to insert an HTML code block and write the code as you have seen throughout this post.

I explained different methods for embedding PDF files into HTML documents, and you also learned how to make them mobile-responsive. Therefore, if you are still confused, please let me know.