The Easiest Way to Embed PDFs on a Website

how's it going guys my name is dom and today i'm going to be showing you quite possibly the easiest way to embed pdfs into your websites now this solution right here is going to require no external libraries or frameworks it's all going to be done natively and it really is extremely simple all right so right here i have this new html document with nothing inside the body now i assume you guys might be coming from an existing project or website and you are looking to embed the pdf into that website if you are don't worry it should work perfectly fine all right now we're going to be embedding this sample.pdf the same one that i showed you at the beginning of today's video so very simple pdf document right here and a quick shout out to this vs code extension called pdf viewer by mathematic i found this right here just a really simple and easy to use extension and it basically worked right away so without this i would be showing you guys the pdf source code and not the actual visual preview here so shout out to this extension and this developer right here but anyway going back inside the index.html let's embed that pdf into this file so currently it looks like this in the browser an empty page of course as expected now heading back inside the code let's use an iframe to embed the pdf so down here we'll say iframe with a frame border of zero okay so of course this right here is the default value for frame border in this code i recommend you guys also use this default value of 0 to remove the old-school border that typically comes with iframes now inside the source we're going to simply specify a path to the pdf file so we'll say inside here sample.pdf just like that okay i can now save this and go back in the browser and we are basically done or refresh here and we get the pdf embedded just like that now an important thing to note about this method right here is that it's going to use the browsers or the operating systems default pdf viewer so in this case here like i showed you earlier this is chrome's pdf viewer so it's going to use that one that's actually quite a good thing because it means uh the operating system or the browser has control of you know what the user sort of sees in their pdf container so that helps with essentially keeping the user familiar with the user interface as well as accessibility so it's actually a good thing in many scenarios that you're using the native viewer and not just some pre-defined one of course the predefined viewer if done well is perfectly fine and it's also consistent but the native viewer is also really good so what if i want to expand this here to you know to of course display those controls because by default on chrome you don't get the controls on top like you do here if it's too small i also found on firefox having this this small is actually going to display the controls anyway so let's go back inside vs codia and essentially increase the width and height of the iframe to reveal those controls so going up here inside the style just give this uh give the iframe an id here of something like mypdf okay then we can target that id inside the style just like this and simply give it a width of something like 85 pixels sorry 85 percent and a height of 975 pixels so of course you guys can put whatever values you want inside here i'll save this and refresh and we get this right here so of course now chrome is going to display all of the options on top the pages the zoom and so on so it really is that easy to embed pdfs into your html document and that is all for today's video guys if this one helped you out drop a like and subscribe and i'll see you in the next one

Channel: dcode

Views: 103,192

Keywords: how to embed html, how to embed pdfs onto html, html embed pdf, embed pdf onto website, how to embed pdfs on the web, how to add pdf object onto html, how to add pdf object on a website, easy way to embed pdfs on a website, how to embed pdf in html, how to embed pdf html, add pdf object to html, add pdf onto html

Id: Ll7PA0dtpW0

Length: 4min 19sec (259 seconds)

Published: Mon Apr 25 2022