Reliably embedding PDFs in a website is not as straight-forward as one might think. This is primarily because each browser handles PDFs differently. Some treat it only as a file, others as media, and Chrome even created its own unique PDF viewer. This means that users in every different browser will have a different experience with embedded PDFs.

Enter PDF.js

The good new is that the folks at Mozilla have been working on a really slick and responsive, cross-browser PDF embed tool. They just call it PDF.js. Here’s their demo of a PDF embedded into a page.

Of course, no jQuery “rock” can go unturned in the WordPress plugin Repository. So there is now also a handy shortcode plugin for utilizing PDF.js in your WordPress site. It’s really easy to implement.

Enter FooBox

But the real magic comes in combining this with the FooBox media lightbox for WordPress. Check out the documentation page on this implementation here. Here’s a couple things you should notice:

  1. There’s no horizontal scrollbar. Meaning it’s responsive.
  2. It has it’s own custom controlbar at the top. That’s necessary in order for all those tools to be available regardless of the browser
  3. You load it in FooBox with the inline HTML method, which means you can add captions, custom captions, sharing icons, or even make it part of a mixed media gallery just like any other inline HTML

Caveats and Alternatives

So far though, it’s not a perfect solution. Though PDF.js provides a way to enable their viewer on mobile devices, it seems that the author of the WordPress plugin is yet to fully implement that. So that is a serious limitation.

There is another PDF embed script, called PDFObject that is MUCH simpler, but it is not responsive at all. It would be really simple to utilize that on your WordPress site with a js include plugin like CSS & JS Toolbox. Then it could also be loaded with FooBox as inline html, but the width and height would have to be static.

The bottom line is that it is possible, and it is a really dramatic and slick and modern way to present PDF content on your WordPress website with FooBox. Just provide a download link for your mobile viewers in addition.

Comments are closed.