PDF embed in html page

I am trying to embed a pdf document into one of my pages. I have been able to using a few code snippets using iframe but when on mobile it looks awful and you cannot scroll for new pages. @Pealco or anybody else have any code snippets that could be used that would be responsive?

2 Likes

when embedding an iframe it’s best to use the Bootstrap 4 responsive embed classes.

There was a post a week or so ago about this.

That doesn’t help me as I’m not familiar was hoping for a copy and paste code that I could just put the url of pdf in

Here is the code I’m using. https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html I just don’t know how to make it responsive, on android it says download pdf which is fine but in iphone its a mess

1 Like

I’ve not tried this but I simply typed PDF when searching for an embed bric and up popped the custom bric for Google docs.

As it happens you can create a PDF file from a Google doc, so I am thinking this may work for you.

Hi @cableguy30.

Try this, there is some CSS, because the Bootstrap classes seem to be focused on media resolutions, this sets it up for a4 paper size (I am assuming). But this will make it responsive.

Don’t forget to replace the URL with your PDF.

<style>
.embed-responsive-210by297 {
  padding-bottom: 141.42%;
}
</style>

<div class="embed-responsive embed-responsive-210by297">
<iframe class="embed-responsive-item" src="https://MY_PDF_URL_GOES_HERE"></iframe>
</div>

If you’re using a different paper size, divide the width by the height and you get the padding % you need. eg. A4 is 210 / 297 * 100 = 141.42 %

I just followed the Bootstrap naming method for the class.

1 Like

Everyone has been very helpful. I’m by no means a webpage developer, but I thought I’d give this a try. I created a cursory project in Blocs and exported it. Then added a snippet I found on the web in the exported HTML file using BBEdit:

I inserted the code used for a video in the above example, but redirected to a PDF file.

     <div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item" src = "MIS_SEVEN_Flyer.pdf" ></iframe>
     </div>

Here is my result here, I think it turned out well. :slight_smile:

https://vimeo.com/397684412

Hello @chikega try this:

  1. In the place you want to show pdf, add a div bric. give it the ID: “example1” (this is my example)

  2. Add inside that div a html code bric and add this code:

<script src="/js/pdfobject.min.js"></script>
<script>PDFObject.embed("/downloads/sample.pdf", "#example1");</script>

<style>
.pdfobject-container { height: 30rem; border: 1rem solid rgba(0,0,0,.1); }
</style>
  1. Go to the page settings and add this file:pdfobject.min.js.zip (2.5 KB)
    (Exapand it and only add the .js file)

  2. The pdf I used for this example is this one: sample.pdf.zip (1.5 KB)

Add this pdf in a hidden part of your webpage by adding it to “Asset Manager” and then drag the file in asset manager to your page and you will see a button saying “download sample.pdf” click in that button and hide it by clicking in “Visibility and unselect the eye”.

The source is this one:
https://pdfobject.com/#examples

1 Like

Hello @Pealco :smile:
I’ve followed your instructions and when I get to adding the hidden pdf from the Asset Manager I don’t get the button “download sample.pdf”.
http://armingchampions.com/wcf works if I change the link to http://armingchampions.com/wcf.pdf, but it is not responsive and does not open on my Smartphone.

@chikega It shows up on Desktop really good, but it is not responsive. I was forbidden to open on my smartphone.

Hello @chikega and @KBConcepts there you have a full explanations:

  1. Add a div bric container:

  2. Give it the ID “example1”:

  3. Inside the div add a Code Widget bric:

  4. Inside the HTML Code add the following one: (example for @KBConcepts)

<script src="js/pdfobject.min.js"></script>
<script>PDFObject.embed("downloads/wcf.pdf", "#example1");</script>
  1. Add pdf to page:
    a) Add pdf to assets:


    There is the file from @KBConcepts: wcf.pdf.zip (596.8 KB)
    b) Drag from assets to page the pdf file. And automatically add a button Download wcf.pdf:

    c) Click on button and hide it by deselecting the eye option under visibility options:

  2. Finally add the js file into page settings under Heather file attachments:


    There is the file : pdfobject.min.js.zip (2.6 KB)

  3. Now you just need to add height to the script and for that you can add a class to the DIV you create in point 1 name it for example size and give it the height in vh and give it 100vh of size:

Try it and hope it helps you.

@Pealco, You’re such a giving person, always ready to give such details, thank you :grinning:
I’m going to put this to the test.

What have I done wrong tried this https://photographyremembered.com/mothersday/!Screen Shot 2021-05-09 at 2.53.22 PM|690x428

Sorry for the delayed answer, please refer to me by using @ and my username or reply to my post, or I don’t receive an alert.

For what I see you missing point 4 or 6 or both. Try please

Thank you so much for this. My example if some needs on

[My website ]

https://photographyremembered.com/terms-of-use/

I tried this, but: embed pdf is to small and height is not enough. I tried then with width: 100% - but nothing changed…

@webixi that won’t work in Bootstrap 5, which uses .ratio as an aspect helper class.

eg. .ratio .ratio-16x9 using these 2 classes will give you 16x9 ratio. There are only a few built in ratios, which is why I made one specifically for an a4 paper size in this solution.

So the new solution is (I changed the name of the custom ratio for consistency)

<style>
.ratio-210x297 {
  padding-bottom: 141.42%;
}
</style>

<div class="ratio ratio-210x297">
      <iframe src="https://MY_PDF_URL_GOES_HERE"></iframe>
</div>

The width will be 100% of its parent container / div.

How has this changed today, now that Bootstrap 5 is here?

As mentioned BS5 has ratio helper classes now. Which make more sense as they are used not just for embedding. Any Video makes use of these helper classes for selecting the poster ratio.

1 Like