# การเพิ่มคลิปให้กดดูคลิปได้เลยไม่ต้องเปิดหน้าต่างใหม่ (Embed)

## การเพิ่มคลิปใน Page

การเพิ่มคลิปที่อยู่บน YouTube ให้สามารถกดเล่นในหน้า Page ได้เลย ไม่ต้องแปะเป็น url หรือ link ให้ผู้เรียนกดเปิดหน้าต่างใหม่เพื่อดูคลิปอีกที มีขั้นตอนดังนี้

### 1.สร้าง Page ใหม่ หรือแก้ไขจาก Page ที่ต้องการเพิ่มวิดีโอ

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FfrW2VWqAmxictKWrdKTa%2Fimage.png?alt=media&#x26;token=1ff2457c-e2e8-4449-ae8a-189053d6de7a" alt=""><figcaption><p>กดที่ +Page เพื่อเปิด page ใหม่</p></figcaption></figure>

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FcHJfox2Nd8mMWbfPYiff%2Fimage.png?alt=media&#x26;token=9acb7242-8efc-49cf-926e-1bdc0383a8b4" alt=""><figcaption><p>คลิก Edit เพื่อแก้ไข กรณีที่ Page ถูกสร้างไว้แล้วและต้องการเพิ่มคลิปใน Page</p></figcaption></figure>

### 2.เลือกไอค่อนรูป Youtube

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FlNTi0r6j5Vf7XyPl4DEh%2Fimage.png?alt=media&#x26;token=6bce678a-c800-4b22-8f97-5632faec363b" alt=""><figcaption></figcaption></figure>

### 3.กด Search หาด้วยชื่อคลิปหรือ url คลิปที่ต้องการ

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FSnFXASjY5OlTmAOakwSf%2Fimage.png?alt=media&#x26;token=1ba1ce28-7eeb-47a8-bc8d-1a28f1a3206f" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
คลิปที่จะสามารถค้นหาในช่องทางนี้ได้จำเป็นต้องเป็นคลิปที่มีสถานะเป็น Publish เท่านั้น
{% endhint %}

### 4.เมื่อพบคลิปที่ต้องการ กดปุ่ม Embed สีฟ้า

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FKxey4W6GM4XMBVhGKJQS%2Fimage.png?alt=media&#x26;token=6bf0f1a0-95c7-4dbd-8bca-8ec00246d5e1" alt=""><figcaption></figcaption></figure>

### 5.คลิปจะถูกนำเข้ามาในหน้า Page สามารถกดดูคลิปได้ทันที

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2Fh75avvTSasZpiNOnBCm5%2Fimage.png?alt=media&#x26;token=28a7d430-ada6-4746-b407-0ec4320199b4" alt=""><figcaption></figcaption></figure>

### 6.เมื่อปรับแต่งหน้า Page เรียบร้อยแล้ว กด Save หรือ Save & Publish บริเวณมุมขวาล่างได้ทันที&#x20;

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2F9TYtU03lxXXp1j8Bmsli%2Fimage.png?alt=media&#x26;token=3aa6be93-f074-4fab-a76a-826748467d59" alt=""><figcaption></figcaption></figure>

### กรณีที่กดเสิร์จไม่พบวิดีโอ ให้ใช้วิธี Copy Embed Code มาวางใน HTML Editor

{% hint style="danger" %}
เนื่องจากการฝังคลิปเป็นการดึงเนื้อหาจาก 3rd Parties ซึ่งจะมีความเป็นไปได้ที่วิธีแรกจะพบปัญหาค้นหาวิดีโอจากชื่อหรือ url ไม่พบ วิธีที่จะกล่าวถึงต่อไปนี้จึงเป็นอีกวิธีที่จะทำให้ยังคงนำคลิปวิดีโอมาใช้ Embed เพื่อให้กดดูคลิปได้เลยโดยไม่ต้องเปิดหน้าต่างใหม่
{% endhint %}

{% hint style="warning" %}
การใช้วิธี Copy Embed Code ในการฝังคลิปแทนวิธีแรกนั้นมีความเป็นไปได้ที่ผู้เรียนจะมองไม่เห็นคลิปเมื่อใช้งานผ่านแอพลิเคชั่น Canvas for Student บนอุปกรณ์ iPad เนื่องจากเหตุผลด้านความปลอดภัยของตัวอุปกรณ์เอง

วิธีการแก้ไขเบื้องต้นคือการเข้าคอร์สและดูคลิปผ่าน Web Browser ภายในอุปกรณ์โดยตรง
{% endhint %}

#### 1.ไปที่คลิปที่ต้องการ กด ![](https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FhrAGXHcyYJy6PpTkEO0l%2Fimage.png?alt=media\&token=cca27e7b-b8c8-42b7-8e9e-8140a194e7e9)หน้าต่างแชร์จะปรากฏขึ้น เลือก ![](https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FURR2yesoyzki36OL4tNs%2Fimage.png?alt=media\&token=c1c3f6bd-0589-4b05-99e2-18d201a28ca0)

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FnPiu41GSEuivhwmdCjoA%2Fimage.png?alt=media&#x26;token=ec964c16-6b9f-4d92-969f-ec5ab1118dff" alt=""><figcaption></figcaption></figure>

#### 2.จากนั้นคัดลอก code ด้านขวามือ**ทั้งหมด**

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FfyKQ2iB93qeXnLuEluLo%2Fimage.png?alt=media&#x26;token=10acadc8-f92e-4178-9f23-657626e69b9e" alt=""><figcaption></figcaption></figure>

#### 3.เข้าไปที่คอร์ส จากนั้นเข้าสู่หน้า Edit กิจกรรมที่ต้องการเพิ่มคลิป (เช่น Page , Assignment) จากนั้นกดปุ่ม ![](https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2F8LQawJH0Uu6TPiwp6GRE%2Fimage.png?alt=media\&token=b2e04f9e-962d-40f7-a3d2-656e4ead0e20)ซึ่งอยู่บริเวณมุมล่างขวาของ Rich Text Editor

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2Fzqf9y9wwvWQlu0XOnPze%2Fimage.png?alt=media&#x26;token=2c98ec32-a79f-49ec-8818-75def6c64ef3" alt=""><figcaption></figcaption></figure>

#### 4.วาง Code คัดลอกไว้ลงไป

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2F5OEVdQAtYec2tVMj72Yj%2Fimage.png?alt=media&#x26;token=1379ea1d-d5d2-45b8-9a88-c54131cf0554" alt=""><figcaption></figcaption></figure>

#### 5.จากนั้นกด ![](https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FXCSHu0f2RRuMoubYWJfB%2Fimage.png?alt=media\&token=2c9c39dd-0482-4473-8224-57bef731562f)กลับมาที่ Rich Text Editor เพื่อตรวจสอบการฝังคลิป ซึ่งจะแสดงผลเหมือนกับวิธี Embed วิธีแรก

#### 6.เมื่อปรับแต่งหน้า Page เรียบร้อยแล้ว กด Save หรือ Save & Publish บริเวณมุมขวาล่างได้ทันที&#x20;

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2F9TYtU03lxXXp1j8Bmsli%2Fimage.png?alt=media&#x26;token=3aa6be93-f074-4fab-a76a-826748467d59" alt=""><figcaption></figcaption></figure>