Embed from GSuite (Google videos, slides, etc.)

Did you know?
You can embed many kinds of documents from GSuite. This includes videos uploaded to Google Drive, Google slides, and more! This makes it easy to add interesting content to your blog post.

Google content can be divided into two categories: content created using a Google tool (a Google Doc, Google Slides, Google Drawing, Google Sheets) and third-party files uploaded to Google and viewed through a preview (audio and video files, Word documents, PDFs).

Instructions for embedding are included below, but you can also refer to some test examples of various GSuite tool embeds in WordPress.

At this time, the following cannot be embedded in a WordPress blog post/page: Jamboard, Google Sites.

Embed a media file uploaded to Google (audio, video)

We have separate documents that cover the embedding of audio and video that is hosted in Google Drive.

Add Audio
Add video

Embed content created in Google docs, slides, drawings

Get the embed code from GSuite

  1. Open the content in Google Drive (Google doc, Google slides, Google Drawings…).
  2. Make sure the item is shared with the public. Private Google content can’t be embedded as easily.
  3. In the menu, go to File> Publish to the web.
  4. Here, you will generate the embed code that will be pasted into your blog post. Be sure to select a size that will fit the space available in the blog post. When in doubt, try a width of 700 or smaller to start.
  5. Copy the embed code generated.

Extra steps for customizing the Google Doc embed code

The embed code provided for a Google Doc doesn’t work as well without some customizations. You can see some test examples, for reference.

You can add thin border to distinguish between the Google doc and your blog post, and you can customize the display size.

All of my additions are in bold:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vQpBF5Z9a02DALDxXD652Vic622H/pub?embedded=true" frameborder="1" width="100%" height="1500"></iframe>

Add embed code to your blog post/page

Once you have the embed code, you can use it in your WordPress blog post/page.

  1. Add a Custom HTML block to your post/page.
  2. Paste the embed code into this block.
  3. If you want your visitors to be able to view your Google content in fullscreen or download it, you might want to add a link directly to the Google content below the embedded item. (The ability to view content fullscreen will be stripped out of the embed code, for security reasons).

Some examples of embedded Google content

Google Doc

Google Drawing

Google Slides