Did you know?

You can embed media files from Google Drive into your WordPress blog posts or pages.

When you upload certain media files to Google Drive, it encodes them in such a way that they can be played back right in the browser – sort of like Youtube (which is also owned by Google). Like with Youtube, you can get the embed code that will allow you to embed this media on other websites. It’s a bit obscured – you have to know where to look in order to find the embed code.

That’s what this post is for! Enjoy!

(Audio sample v01d – “Of the Willing”)

---

1. Upload audio file to Google Drive & set permission
2. Get the embed code
3. Paste the embed code into blog post

---

1. Upload audio file to Google Drive & set permission

After uploading, right-click the file you uploaded, then select “Get shareable link” from the menu. This will open the sharing of your item to the public. Note that, by default, users are not prevented from downloading the audio file. (Fig. 1)

This is all necessary in order to embed the audio on your blog site. If you change the permissions and/or prevent users from downloading the file, the media will not play for some visitors to your blog.

2. Get the embed code

1. Double-click the audio file from the list of items in Google drive. This will open the Preview window. (see Fig 2)
   Find and click the icon with three vertical dots, in the upper-right corner (see Fig 2 #1).
2. From the menu, select “Open in new window” (see Fig 2 #2). This will open a similar looking window in a new tab.

1. In the new window, find and click the icon with three vertical dots, in the upper-right corner (see Fig 3 #1).
2. From the menu, select “Embed item…” (see Fig 3 #2). This will open a pop-up containing the code you will need in order to embed the audio in your blog post. It will look something like the image in Fig 4.
3. Copy the code, and paste somewhere safe until you’re ready to put it into the blog post.

3. Paste the embed code into your blog post

Go into your WordPress blog, and either edit an existing post or page OR create a new one.

If you’ve never worked around embed code before, it may be a good idea to add all of the other elements of your blog post/page first. For example, if you wanted to write a description or add an image, you may want to do that first and then add the embed code.

Most importantly, don’t change the embed code unless you know what you’re doing.

Embedding the code using the block editor

1. Give the post/page a title.
2. Click the + icon in the menu bar at the top to add a new block to the bottom of the page.
3. In the block selector, type “HTML” into the field, and then select the “Custom HTML” block when you see it in the list.
4. Paste the embed code into the textbox and complete your post. When viewed outside of the editor, it should look like the example below.
5. You may wish to adjust the width and height to suit the size of the player (I edited my embed code to display a height of 75).

---

Embedding the code using the Classic Editor

1. Give the post/page a title (see Fig 5 #1).
2. Make sure your cursor is on a new line, where you want to embed the audio player.
3. Click the ‘Text’ tab, found at the top-right corner of the text editor (see Fig 5 #2).
4. Paste the embed code into the textbox (see Fig 5 #3).

It will look something like this:

IF you feel comfortable editing the embed code, you can change the width and height values so that the embedded media doesn’t take up so much extra space. For the basic audio player, a height of 100 should be enough.

Example code:

<iframe src=”https://drive.google.com/file/d/0B9LKEddT6B_1V3RNcnh0ddddd/preview” width=”640″ height=”480″></iframe>

Can be changed to:

<iframe src=”https://drive.google.com/file/d/0B9LKEddT6B_1V3RNcnh0ddddd/preview” width=”640″ height=”100″></iframe>