PDF Embedder

Upload PDFs and embed them straight into your site – just like adding images! PDFs will be automatically sized to their natural size and shape (or just fill the width available if they are too big). Optionally, you can specify a width and the correct height will be calculated automatically. The shape will be recalculated whenever the page is resized by the user.

The plugin has a unique method for embedding PDFs, using Javascript only, and not using iframes or third-party services. This gives a lot of flexibility over the appearance of your document.

The free viewer currently has Next/Prev buttons to page through the document, and zoom buttons.

PDFs are embedded within your existing WordPress pages so we have full control over appearance, and all Javascript and other files are served by your own server (not by Google or any other third-party who may not be able to guarantee their own reliability).

Even if other plugins use similar technology, they will insert the PDF itself into an ‘iframe’ which means they do not get the flexibility over sizing.

There is no button for users to download the PDF in the free version of the plugin, but this is available in the Premium versions along with other extra features.
Hyperlinks in your PDF will only be clickable in the Premium versions.

USAGE

Once installed and Activated, click Add Media from any page or post, just like adding an image, but drag and drop a PDF file instead.

When you insert into your post, it will appear in the editor as a ‘shortcode’ as follows:

[pdf-embedder url=’https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf’]

You can change the default appearance – e.g. width, and toolbar position/appearance through Settings -> PDF Embedder.

To override your site-wide defaults on an individual embed, see the Plugin Instructions for information about sizing options plus other ways to customize the shortcodes.

 

 

Size and Shape

You can optionally override width and height as follows:

[pdf-embedder url=”https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf” width=”500″]

Note the default value for width is ‘max’.

Resizing works as follows:

• If width=’max’ the width will take as much space as possible within its parent container (e.g. column within your page).
• If width is a number (e.g. width=’500′) then it will display at that number of pixels wide.

In all cases, if the parent container is narrower than the width calculated above, then the document width will be reduced to the size of the container.

The height will be calculated so that the document fits naturally, given the width already calculated.

It is possible to specify a fixed height (e.g. height=”200″), in which case the document may be cut off vertically.
The height will be reduced to fit if it is larger than needed to display the document correctly.

 

Note:

If you are using the ‘Twenty Nineteen’ theme, you will have to add the following CSS to get the PDF to show the full file.

 

/* FIX 2019 WIDTH CALCULATION */
.entry .entry-content > .pdfemb-viewer {
    max-width: 100%;
}