Embed Documents & Audio to Blogger

A simple guide to embedding Google Drive files using Iframe

Quick Summary: PDF vs Audio

Embedding both follows the same logic. The only difference is the Height.

File Type	Recommended Height	Key Requirement
PDF / Docs	400px - 700px	Change `/view` to `/preview`
Audio (MP3)	60px - 100px	Change `/view` to `/preview`

      <iframe src="URL/preview" width="100%"
      height="____"></iframe>
    

How to Embed Audio (Method)

Upload & Share: Upload your file (MP3/WAV) to Drive. Set access to "Anyone with the link".
Copy Link: Your link will look like this:
https://drive.google.com/file/d/1X_ZBs31...NGDre0x/view?usp=drive_link
Replace ID: Extract the FILE_ID (the green part above) and put it into this code:

      <iframe 

        src="https://drive.google.com/file/d/YOUR_FILE_ID/preview" 

        width="100%" 

        height="60" 

        allow="autoplay">

      </iframe>

Ex.

How to Embed PDF (Dec 2025 Updates)

Since the "Open in new window" UI has changed, follow these manual steps:

Step 1: Get the Share link from Drive.
Step 2: Replace /view?usp=drive_link with /preview.
Step 3: Set Height to 700px for better viewing experience.

Pro Tip: Use ChatGPT to generate the code by pasting your link and typing: "Get the embed code for this link".

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

Understanding HTML Terms

src (Source): Tells the browser: "Get the content from this location."
alt (Alternative Text):
- Required? No (but strongly recommended).
- Why? Helpful for SEO and screen readers if the image fails to load.

របៀបដាក់ (Embed) ឯកសារ PDF និងសំឡេងក្នុង Blogger

មេរៀនសង្ខេបងាយៗក្នុងការប្រើប្រាស់ Iframe ជាមួយ Google Drive

១. ចំណុចសំខាន់ដែលត្រូវចងចាំ

ការដាក់ឯកសារ PDF និងសំឡេង (Audio) គឺមានលក្ខណៈដូចគ្នា ប្លែកតែត្រង់ការកំណត់ កម្ពស់ (Height) ប៉ុណ្ណោះ៖

ប្រភេទឯកសារ	កម្ពស់ (Height)	លក្ខខណ្ឌចាំបាច់
PDF / ឯកសារផ្សេងៗ	400px ទៅ 700px	ដូរ `/view` ទៅជា `/preview`
សំឡេង (Audio MP3)	60px ទៅ 100px	ដូរ `/view` ទៅជា `/preview`

      <iframe src="Link-របស់បង/preview"
      width="100%" height="ដាក់លេខកម្ពស់"></iframe>
    

២. របៀបដាក់សំឡេង (Audio) ចូលក្នុង Blog

ជំហានទី ១៖ បង្ហោះ (Upload) ឯកសារទៅក្នុង Google Drive រួចកំណត់ការ Share ទៅជា "Anyone with the link" (អ្នកដែលមានតំណភ្ជាប់អាចមើលបាន)។

ជំហានទី ២៖ ចម្លង Link ដែលមានទម្រង់បែបនេះ៖
https://drive.google.com/file/d/1X_ZBs31...NGDre0x/view?usp=drive_link

ជំហានទី ៣៖ យក ID នៃឯកសារ (អក្សរពណ៌ក្រហមខាងលើ) មកដាក់ក្នុងកូដខាងក្រោម៖

      <iframe 

        src="https://drive.google.com/file/d/ដាក់-ID-ឯកសារ-នៅទីនេះ/preview" 

        width="100%" 

        height="60" 

        allow="autoplay">

      </iframe>

៣. របៀបដាក់ឯកសារ PDF (Update ២០២៦)

ចាប់ពីឆ្នាំ ២០២៦ ទៅ ការប្រើប៊ូតុង "Open in new window" អាចនឹងមានការប្រែប្រួល ដូច្នេះបងអាចអនុវត្តវិធីសាស្ត្រដោយដៃ (Manual) នេះបាន៖

ទទួលបាន Link ពី Google Drive។
លុបផ្នែកខាងក្រោយ ចាប់ពី /view?usp... ចោល រួចជំនួសដោយ /preview វិញ។
កំណត់កម្ពស់ (Height) ប្រហែល 700 ដើម្បីឱ្យអ្នកអានស្រួលមើល។

គន្លឹះពិសេស៖ បងអាចចម្លង Link ទៅដាក់ក្នុង ChatGPT រួចសួរថា "ជួយរៀបចំកូដ Embed សម្រាប់ Link នេះឱ្យខ្ញុំផង" វានឹងរៀបចំឱ្យបងភ្លាមៗ!

      <iframe src="https://drive.google.com/file/d/លេខ-ID-ឯកសារ/preview" width="100%" height="700"></iframe>
    

៤. ការយល់ដឹងអំពីពាក្យបច្ចេកទេស (Terms)

src (Source): មានន័យថា "ប្រភព"។ វាប្រាប់ Browser ថាត្រូវទៅយកទិន្នន័យពីទីណាមកបង្ហាញ។
alt (Alternative Text): គឺជាអត្ថបទជំនួសសម្រាប់រូបភាព។ បើរូបភាពដើរមិនចេញ វានឹងបង្ហាញអក្សរនេះជំនួសវិញ (ល្អសម្រាប់ SEO)។
width & height: កំណត់ទំហំទទឹង និងកម្ពស់នៃ "ស៊ុម" (Frame) ដែលបងចង់បង្ហាញ។

BONGSOKLA.COM

Tutorial: How to Embed Audio File in a Blogger Site?