How to embed a PDF file hosted on Google Drive in a WordPress page or post
This tutorial will guide you how to embed a PDF file hosted on Google Drive in a WordPress page or post.
We will also show you how to open the PDF file in a WordPress lightbox using the plugin Wonder Lightbox.
There are three steps in the tutorial:
- Step 1 - Share on Google Drive and copy the link
- Step 2 - Change the format of the Google Drive link
- Step 3 - Embed the PDF to a WordPress page or post using an iframe
- Optional - Open the PDF file in a WordPress lightbox
A PDF lightbox demo is as follows: Open Google Drive PDF File in a Lightbox
A PDF embedder demo is at the end of this tutorial.
Step 1 - Share on Google Drive and copy the link
In your Google Drive account, right click the PDF file, in the context menu, click Share.
If your PDF file will be viewed by any visitors of your website, in the Share dialog, change the General Access to "Anyone with the link" then click the Copy link button.
Step 2 - Change the format of the Google Drive link
The share URL copied from Google Drive will have the following format:
https://drive.google.com/file/d/137o_s1IoYFRr1zqOyA3tU0p1goTG1gZO/view?usp=sharing |
You will need to change it to the following URL, that's, change the view?usp=sharing at the end of the URL to preview:
https://drive.google.com/file/d/137o_s1IoYFRr1zqOyA3tU0p1goTG1gZO/preview |
Step 3 - Embed the PDF to a WordPress page or post using an iframe
You can add the following HTML code to your WordPress page or post to embed the PDF file. Make sure to change the URL of the iframe src attribute to your own PDF URL link. You can change the width and height to fit your own page design.
<iframe src="https://drive.google.com/file/d/137o_s1IoYFRr1zqOyA3tU0p1goTG1gZO/preview" width="100%" height="600px" style="border:0;"></iframe> |
A PDF embedder demo created with the above code is at the end of this tutorial.
Optional - Open the PDF file in a WordPress lightbox
By using the plugin Wonder Lightbox, you can easily open the PDF file in a WordPress lightbox. You can download the Wonder Lightbox Trial version from the plugin homepage, make sure it works for you before upgrading to the Pro version.
After you install the plugin, simply link a button or text to the PDF URL, then add a class name wplightbox to the link, it will turn the link to a lightbox. The HTML code will be like:
<a href="https://drive.google.com/file/d/137o_s1IoYFRr1zqOyA3tU0p1goTG1gZO/preview" class="wplightbox">Open Google Drive PDF File in a Lightbox</a> |
The demo created with the above code is as follows: Open Google Drive PDF File in a Lightbox.
If you are using a page editor, for example, WordPress Block Editor, Elementor, Divi, WPBakery etc, you can view the tutorials on this page: Wonder Lightbox Help Document.