How to Embed Pdf File With Responsive Width

Embedded pdf in Bootstrap not full height

You have 2 extra rulesets that'll work as intended but you need to...

...correct this in HTML:

<div class="flexible-container-embed"> to this:
<div class="flexible-container">

...and add this to .flexible-container CSS ruleset:
```
 padding-bottom:100%`
```
When adding those 2 rulesets, place them in a <style> element and then add that to be the last position inside the <head> element. Go to the Plunker link below for an example.

I think what happened is that you found the correct code to fix it, but while implementing it you didn't understand why certain properties and values looked so odd. For instance (sorry about the caps, the formatting is limited, I'm not yelling):

/* Flexible iFrame */

.flexible-container {
    position: relative;
    /* This blank line was probably:
    || padding-top: 56.25%;
    */
    height: 0;
    overflow: hidden;
}

/* This ruleset says:
|| "Apply the following properties and their values to ANY `<iframe>`,
|| `<object>`, or `<embed>` THAT IS A CHILD OF any element with the 
|| class of `.flexible-container`.
*/
.flexible-container iframe,   
.flexible-container object, 
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

When you applied these 2 rulesets, you had given the div that wraps the <object> the class of .flexible-container-embed but both rulesets apply to elements with the class of .flexible-container and any of it's children that are <iframe>, <object>, or <embed>. Basically, remove the ~~-embed~~ part of the class name.

Next was the padding-bottom property. This is commonly at 56.25% which when applied to the container of an iframe the proper context to maintain a height of 9 to the width of 16. That's good for a wide screen format video, but not so good for a PDF which is probably has an aspect ratio of 8:11 or 72% (I used 100% in the demo since that's what you requested, expect an edit that'll include a 72% version.) If we combine the padding with the height:0, we get a container that acts like "shrinkwrap" that adapts it's height according to it's content's width. Update: there's no discernible change from 100% to 72% because of the padding the PDF plugin adds.

I changed the <object> into an <iframe> because they are more versatile, you can use <embed> as well. Review this PLUNKER

Recommended way to embed PDF in HTML?

Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.

Online demo:
https://mozilla.github.io/pdf.js/web/viewer.html

GitHub:
https://github.com/mozilla/pdf.js

How to Embed Pdf File With Responsive Width

Embedded pdf in Bootstrap not full height

Recommended way to embed PDF in HTML?

Related Topics

Leave a reply