The Easiest Way to Embed PDFs on a Website

Let's have a look at the easiest way to embed PDFs onto your website.

The simplicity of this solution comes from the fact that we're using the web browser's built-in (native) PDF viewer using <iframe>.

Video Tutorial

If you prefer, you can see how to embed PDFs in video form 👇

How to Embed PDFs

All you need to do is specify an <iframe>, and set the src attribute to the path of your PDF file. We can also remove the frame border using frameborder="0".

For example:

<iframe src="documents/file.pdf" frameborder="0"></iframe>

When running the above code in your browser, you should see a small area where your PDF file is being generated. If you wish to resize it, you can do so using CSS.

Resize Using CSS

Let's begin by adding an id to the <iframe>, then, apply some styles in CSS:

<iframe id="myPDF" src="documents/file.pdf" frameborder="0"></iframe>

#myPDF {
    width: 85%;
    height: 975px;
}

Feel free to experiment with the CSS styles to suit your liking 🙂

Enrol Now 👉 JavaScript DOM Crash Course

You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Happy coding 😎