How to Embed a PDF file on a Webpage with HTML

To embed a PDF file inside a webpage you can use an 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 token attr-value">width:100%;height:50vh;" frameborder="0" >iframe>

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

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊