Embed Documents, Audio to blogger post

How to embed audio into blogger post?

Method 1: Copy the Link and paste into ChatGPT and ask ChatGPT to embed

Step-by-step

Step 1: Upload Audio to Drive and Copy Link

1. Go to Google Drive
2. Upload your audio file (MP3, M4A, WAV) to Google Drive
3. Right-click the file → Share → Share
4. Change access to “Anyone with the link → drop down arrow, change to Viewer”
5. Click Copy link

Eg of a Link being Copied looks like the following

https://drive.google.com/file/d/1X_ZBs31vhazvf8lKVEG_wflmpNGDre0x/view?usp=drive_link

Step 2: Ask ChatGPT to embed

Please help to embed the following audio file link for me to post to blogger

It will return with the following results

<iframe height="60" src="https://drive.google.com/file/d/1X_ZBs31vhazvf8lKVEG_wflmpNGDre0x/preview" width="100%"></iframe>

Step 3: Copy the Step to embedded code and paste to blog post HTML Page

Method 2: Create your own embedded code with the following steps

Step-by-step

Step 1: Upload Audio to Drive and Copy Link

1. Go to Google Drive
2. Upload your audio file (MP3, M4A, WAV) to Google Drive
3. Right-click the file → Share → Share
4. Change access to “Anyone with the link → drop down arrow, change to Viewer”
5. Click Copy link

Eg of a Link being Copied and paste into any text editing for later use. Copy or Cut only the green portion at the text editor. The rest delete or discard, of no use.

https://drive.google.com/file/d/1X_ZBs31vhazvf8lKVEG_wflmpNGDre0x/view?usp=drive_link

https://drive.google.com/file/d/1X_ZBs31vhazvf8lKVEG_wflmpNGDre0x/view?usp=drive_link

Step 2: Copy and Paste and use the following in the blog HTML

<iframe 
  src="https://drive.google.com/file/d/FILE_ID/preview" 
  width="100%" 
  height="60" 
  allow="autoplay">
</iframe>

Step 3: Replace the Red Portion (FILE_ID) with the Green Portion (1X_ZBs31vhazvf8lKVEG_wflmpNGDre0x)

Copy or Cut and Paste the Green Portion to Paste onto the Red Portion

The Final result is as follow. Ready to use embedded code

<iframe 
  src="https://drive.google.com/file/d/1X_ZBs31vhazvf8lKVEG_wflmpNGDre0x/preview"

  width="100%" 
  height="60" 
  allow="autoplay">
</iframe>

Step 4: Copy the Step 3 embedded code and paste into the blog post HTML page

How To Embed PDF and other Documents In Blogger Blog Posts?

From Dec 2025 onwards
The New UI (User Interface) no longer showing up OPEN IN NEW WINDOW. Have to use following complicated steps from Dec 2025 onwards

Use ChatGPT to help to embed the code

In the event that the following didn't work
Open the pdf file in Google drive (preview mode) - Share - Copy Link - Launch ChatGPT - Paste into Link into chatGPT - TYPE get the embedded code for me

Or

Do the Embedding code yourself

On the pdf file name you want, on the far right, 3 dots menu - click on it - Share - Right arrow - Copy Link, it should look something like this

https://drive.google.com/file/d/1m6bV62zmabZ9oZnWNLyfN8aX2BVRh0nR/view?usp=drive_link

Replace: /view?usp=drive_link
With: /preview:

Result Link:
https://drive.google.com/file/d/1m6bV62zmabZ9oZnWNLyfN8aX2BVRh0nR/preview:

Sample Template of embedded iframe:
<iframe src="PDF_LINK_HERE" width="100%" height="700px"></iframe>

Copy the Result Link to Replace the "PDF_LINK_HERE"

Final Embedded code
<iframe src= https://drive.google.com/file/d/1m6bV62zmabZ9oZnWNLyfN8aX2BVRh0nR/preview:
width="100%" height="700px"></iframe>