It’s time to know that how to embed a PDF file in an HTML page directly. Some websites tend to show pdf files directly on their site’s webpages instead of giving a download link for the files. Thanks to HTML5, you can also do the same with simple HTML code without using any third-party solutions. The method we are going to see is the quick and easy solution which gives you some control over how the pdf file is shown to the user. Also, it works on all modern web browsers that support HTML5.
There are many code snippets available online or on many other blogs and websites, but everyone cannot optimize your blog or website, so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.
Table of Contents
Features:
- Light Weight.
- Pure HTML5 Code.
- Cross Browser.
- No External Files.
- Fully Customizable.
- Responsive.
How To Embed PDF File In Your WebPage Using Pure HTML5?
HTML5 provides <embed> element which acts as a container for external applications like images, videos, mp3 files or other multimedia objects. Using this tag makes the browser automatically include controls for the multimedia objects (in case the browser supports the particular media type).
We are going to use this <embed> tag to show the pdf files on the web page without using complex third-party scripts. Open the HTML page in which you want to embed the file and include the below markup wherever you want the pdf file to be shown.
<embed width="600" height="450" src="mypdf.pdf" type="application/pdf"></embed>
Now you open the file in the browser and the pdf file is shown on the HTML page. I hope you like this simple solution to embedding the pdf files in the website’s HTML page without hassle.
Customization:
No need to customize it. Just copy-paste. Rest edit the code as per comments and need. Remember to add JavaScript after HTML code.
- The attribute width and height represent the width and height of the pdf container in pixels.
- The attribute src is the path to the pdf file to be embedded.
- The attribute type is the media type of the embedded content.
Troubleshooting the Errors:
Do it with concentration and patience. Check your all steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.
Final Words:
That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.
Be the first to write a comment.