Lede Docs

How to Embed PDFs

As a Lede publisher, there may come a time when you’d like to embed a PDF into one of your posts. 

There are two recommended ways to do this, depending on the content of the PDF you’d like to embed.

How to Embed Primary Source Documents via DocumentCloud

DocumentCloud is a web-based software platform that helps you organize, research, annotate, analyze and publish primary source documents. It is free for journalism organizations.

To embed primary source documents through DocumentCloud:

  1. Create an account with DocumentCloud.
    1. If you need more information about signing up for and using DocumentCloud, check out the service’s FAQ page and Tips page.
  2. If you need more information about signing up for and using DocumentCloud, check out the service’s FAQ page and Tips page.
  3. Identify the document you want to embed. 
    1. Either search its database for PDFs, such as court documents, financial reports, and any other public primary source document.
    2. Or upload documents of your own.  Please note that if you do this, you’ll need to request account verification through DocumentCloud and their parent organization (MuckRock) here.
  4. Either search its database for PDFs, such as court documents, financial reports, and any other public primary source document.
  5. Or upload documents of your own.  Please note that if you do this, you’ll need to request account verification through DocumentCloud and their parent organization (MuckRock) here.
  6. After you upload your document, copy the document URL from your browser’s address bar. 
  7. Go to the WordPress editor of your desired post.
  8. Select the Embed block in WordPress.
  10. Paste the DocumentCloud URL into the Embed block and click “Embed.” 
  12. The PDF will now display in a contained view frame. Update or publish your post when you’re ready to view the PDF in the live post.

Embedding Other PDFs via Google Drive or OneDrive

If you want to embed a PDF that is not hosted by DocumentCloud, you can use either Google Drive or Microsoft OneDrive. 

To embed other documents through Google Drive or OneDrive:

  1. Upload or select the desired PDF from Google Drive or Microsoft OneDrive.
  2. Copy the embed codes as described in the Google Docs Embed or Microsoft OneDrive Embed help articles from WordPress.
    1. Note: Do not use the Shortcode block for Microsoft OneDrive as the help article suggests. Please follow the instructions below instead for successful OneDrive embeds.
  3. Note: Do not use the Shortcode block for Microsoft OneDrive as the help article suggests. Please follow the instructions below instead for successful OneDrive embeds.
  4. Once the embed code has been copied from Google or Microsoft, go to  the WordPress editor of your desired post.
  5. Select the Custom HTML block.


  7. Paste the embed code from Google or Microsoft into the Custom HTML block.
  8. Update or publish your post when you’re ready to view the PDF in the live post.
    1. Note: You will not be able to preview the PDF embed in the WordPress editor. You must save the post in order to preview the embedded document.
  9. Note: You will not be able to preview the PDF embed in the WordPress editor. You must save the post in order to preview the embedded document.

Adjusting Height and Width Dimensions on Embed Codes

Google and Microsoft embeds use iframe code to display the embed on other sites. 

The iframe code will include default height and width dimensions provided by the service used. Here are examples of codes for both services:

You can edit these dimensions by changing the width and height parameters in the iframe code. 

The max width for any post content on the Lede platform is 720px (pixels), but we recommend using percentages to maintain scalability and accessibility across all devices. 

Here is an example of this:

Below, we have changed the width of this iframe from 476px to 100% of the content width simply by changing the numbers inside of the double quotes for the width property from “476” to “100%”  

You may also change the number for the height property (in pixels or percent), if desired. In our example below, we have changed the height to 600.

All of these numbers have been bolded in the code below for emphasis.

One important final note: Do not change or remove any other characters from this code block. If you do, the iframe will not render properly.

Original iframe code:

<iframe src="https://onedrive.live.com/embed?cid=D8021CEC31B4B669&resid=D8021CEC31B4B669%21114&authkey=AEANIUVnBldIEic&em=2" width="476" height="288" frameborder="0" scrolling="no"></iframe>

Updated iframe code (changed width and height):

<iframe src="https://onedrive.live.com/embed?cid=D8021CEC31B4B669&resid=D8021CEC31B4B669%21114&authkey=AEANIUVnBldIEic&em=2" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

Was this article helpful?