How to Embed a PDF file on a Webpage with HTML

To embed a PDF file inside a webpage you can use an <iframe> element, and add the path to your PDF file as a source value:

<iframe src="path-to-your-file.pdf"></iframe>

By default, iframes have a border that you can remove with the frameborder attribute:

<iframe src="path-to-your-file.pdf" frameborder="0"></iframe>

You may also want to add a width and height to your iframe. You can either do that with a CSS class or with inline styling.

In the example below, I add a width value of 100% so that the iframe expands to whatever the width of your parent container is (which is a good practice). I also give it a height value of 50vh which means that the iframe will take up 50% of the height of whatever screen you’re viewing it on.

<iframe
  src="path-to-your-file.pdf"
  style="width:100%;height:50vh;"
  frameborder="0"
></iframe>

Change the width and height to whatever you need for your project.