Embed PDF files in HTML documents

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.

Embedded PDF file
Embedded PDF file on Desktop

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 {
  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:

It appears you don’t have a PDF viewer for this browser. No biggie… you can click here to download the PDF file.

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.

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty


I explained different methods for embedding PDF files into HTML documents. Also, you learned how to make it mobile-responsive.

Therefore if you still have any confusion, please let me know.