> ## Documentation Index
> Fetch the complete documentation index at: https://guide.smsu.in.th/llms.txt
> Use this file to discover all available pages before exploring further.

# Media

> รูปภาพ วิดีโอ และการฝังสื่ออื่น ๆ ในหน้าเนื้อหา

## Image

เลือก `Image` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) แล้วอัพโหลดไฟล์รูปภาพหรือเลือกจากไฟล์ที่มีอยู่แล้ว

<img src="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/smsulogo-banner-wide.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=7e6f6f5ca7ba46aaf17ccf43c2dad8b9" alt="ตัวอย่างรูปภาพ" width="1500" height="500" data-path="images/smsulogo-banner-wide.webp" />

## Frames

เลือก `Frame` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) เพื่อสร้างกรอบสำหรับเนื้อหาภายใน เช่น รูปภาพ วิดีโอ หรือข้อความ

ใน Web Editor กด <Icon icon="ellipsis-vertical" /> สามจุดด้านขวาของ `Frame` เพื่อใส่ caption หรือคำบรรยายของกรอบนั้น

<Tip>สามารถใช้ `Frame` เพื่อสร้างรูปภาพพร้อมคำบรรยายด้านล่างได้</Tip>

<Frame caption="ตัวอย่างรูปภาพพร้อมคำบรรยายด้านล่าง">
  <img src="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/smsulogo-banner-wide.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=7e6f6f5ca7ba46aaf17ccf43c2dad8b9" alt="ตัวอย่างรูปภาพพร้อมคำบรรยาย" width="1500" height="500" data-path="images/smsulogo-banner-wide.webp" />
</Frame>

## Embeds

เลือก `Embed` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) แล้ววางโค้ดฝัง เช่น YouTube, Google Drive, หรือเว็บไซต์อื่น ๆ

### YouTube

<Steps>
  <Step title="กด Share ใต้วิดีโอที่ต้องการฝัง">
    <img src="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/it/guide/components/3-yt-share.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=da4718ebafddfb4c97377bbb3a8d2510" alt="กด Share ใต้ YouTube Video" width="444" height="232" data-path="images/it/guide/components/3-yt-share.webp" />
  </Step>

  <Step title="เลือก Embed">
    <img src="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/it/guide/components/4-yt-embed.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=07b5740e094df3818ce1349a8bd6966b" alt="เลือก Embed" width="444" height="222" data-path="images/it/guide/components/4-yt-embed.webp" />
  </Step>

  <Step title="คัดลอกโค้ดฝัง">
    <img src="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/it/guide/components/5-yt-copy.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=afd5c0cb5befb485f6734113d81383e4" alt="คัดลอกโค้ดฝัง YouTube Video" width="444" height="225" data-path="images/it/guide/components/5-yt-copy.webp" />
  </Step>

  <Step title="วางโค้ดฝังหลังเลือก Embed ใน Web Editor">
    หากเป็นไปได้ ให้ลบส่วน `width="XXX"` และ `height="XXX"` ออก แล้วเพิ่ม `className="w-full aspect-video rounded-xl"` แทน
    เพื่อให้แสดงผลเต็มความกว้างของหน้าและมีอัตราส่วน 16:9

    ```html {2-4} theme={null}
    <iframe
      className="w-full aspect-video rounded-xl"
      width="560"    <--- ลบออก
      height="315"   <--- ลบออก
      src="https://www.youtube.com/embed/tAIzWTdYr3M?si=m05AcjiJheZz957w"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    ></iframe>
    ```
  </Step>

  <Step title="หลังกด Save Changes จะได้ผลลัพธ์ดังตัวอย่างนี้">
    <iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/o1Gzvgbvp68" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Step>
</Steps>

### Google Drive

คัดลอกโค้ดฝังด้านล่างนี้ แล้ววางใน Web Editor หลังเลือก `Embed` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components)

```html {3} theme={null}
<iframe
  className="aspect-video w-full rounded-xl"
  src="https://drive.google.com/file/d/FILE_ID/preview"
  allow="autoplay"
></iframe>
```

แทนที่ `FILE_ID` ด้วย ID ของไฟล์ที่ต้องการฝัง

สามารถหา ID ของไฟล์จาก URL หลังกด Share แล้วคัดลอก โดยอยู่ระหว่าง `/d/` และ `/view` เช่น
URL ด้านล่างมี ID คือ `1QtbUIFt6jiecFFEdnex-mGqR0VnJLvWY`

```
https://drive.google.com/file/d/1QtbUIFt6jiecFFEdnex-mGqR0VnJLvWY/view?usp=sharing
```

<Warning>
  ห้ามวาง URL ที่คัดลอกมาจาก Google Drive หลังกด Share โดยตรง เพราะลงท้ายด้วย `/view`
  ซึ่งไม่สามารถแสดงผลได้ ให้แก้เป็น `/preview` แทน
</Warning>

<iframe className="aspect-video w-full rounded-xl" src="https://drive.google.com/file/d/1QtbUIFt6jiecFFEdnex-mGqR0VnJLvWY/preview" allow="autoplay" />

### Google Calendar

<Steps>
  <Step title="กดจุดสามจุดด้านขวาของปฏิทินที่ต้องการฝัง">
    ไปที่ [Google Calendar](https://calendar.google.com) แล้วเลือกปฏิทินที่ต้องการฝัง >
    กด <Icon icon="ellipsis-vertical" /> สามจุดด้านขวา

    <img src="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/it/guide/components/6-calendar-3dots.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=449439715d67cae0f34d68e5ba77169f" alt="เลือกปฏิทินที่ต้องการฝัง" width="673" height="322" data-path="images/it/guide/components/6-calendar-3dots.webp" />
  </Step>

  <Step title="เลือก Setting">
    <img src="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/it/guide/components/7-calendar-options.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=4cdb3d66ffd3c046592e63ba2054675e" alt="เลือก Setting" width="673" height="188" data-path="images/it/guide/components/7-calendar-options.webp" />
  </Step>

  <Step title="คัดลอกโค้ดฝัง">
    เลื่อนหาส่วน "Integrate calendar" >
    คัดลอกโค้ดฝังที่ "Embed code" ซึ่งขึ้นต้นด้วย `<iframe` แล้ววางใน Web Editor หลังเลือก `Embed`

    <img src="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/it/guide/components/8-calendar-embedcode.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=1ea87a6f89d804009eab488f7aef5fbe" alt="คัดลอกโค้ดฝัง Google Calendar" width="673" height="305" data-path="images/it/guide/components/8-calendar-embedcode.webp" />
  </Step>

  <Step title="ปรับแต่งโค้ดฝัง">
    ลบตัวแปรอื่นที่ไม่ใช่ `src` ออก เช่น `style`, `width`, `height`, `frameborder`, `scrolling` แล้วใส่ `className="aspect-[4/3] w-full rounded-xl"` เพิ่มแทน

    ```html {2, 4-8} theme={null}
    <iframe
      className="aspect-[4/3] w-full rounded-xl"
      src="https://calendar.google.com/calendar/embed?src=c_73cc5a382031b63dbbcb857f622dac18632dfff5de367e8827a836e042b7ec64%40group.calendar.google.com&ctz=Asia%2FBangkok"
      style="border: 0" <--- ลบออก
      width="800"       <--- ลบออก
      height="600"      <--- ลบออก
      frameborder="0"   <--- ลบออก
      scrolling="no"    <--- ลบออก
    ></iframe>
    ```

    <Warning>
      ถ้าไม่ปรับแต่งโค้ดฝังที่คัดลอกมา เมื่อ Save Changes แล้ว หน้านั้นจะ error
    </Warning>
  </Step>

  <Step title="กด Save Changes จะได้ผลลัพธ์ดังตัวอย่างนี้">
    <iframe className="aspect-[4/3] w-full rounded-xl" src="https://calendar.google.com/calendar/embed?src=c_73cc5a382031b63dbbcb857f622dac18632dfff5de367e8827a836e042b7ec64%40group.calendar.google.com&ctz=Asia%2FBangkok" />
  </Step>
</Steps>