เข้าสู่ระบบและสมัครคอร์สนี้เพื่อดูเนื้อหา

เข้าสู่ระบบ

ทำให้ผู้เข้าชมใช้เวลาบนหน้าเว็บนานขึ้น (Dwell Time) และยัง ไม่เปลืองพื้นที่เซิร์ฟเวอร์หรือแบนด์วิดท์ของคุณ เพราะตัววิดีโอจะถูกดึงมาเล่นจากเซิร์ฟเวอร์ของ YouTube โดยตรง

นี่คือขั้นตอนและวิธีการนำไปใช้งานแบบละเอียดในทุกรูปแบบ:

ขั้นตอนที่ 1: การคัดลอกโค้ดฝัง (Embed Code) จาก YouTube

  1. เปิดวิดีโอ YouTube ที่คุณต้องการนำมาใส่บนเว็บไซต์
  2. กดปุ่ม “แชร์” (Share) ที่อยู่ใต้ตัวเล่นวิดีโอ
  3. เลือกไอคอน “ฝัง” (Embed) ซึ่งเป็นสัญลักษณ์ </>
  4. หน้าต่างป๊อปอัปจะแสดงโค้ด HTML ที่ขึ้นต้นด้วยแท็ก <iframe…>
  5. (ตัวเลือกเสริม) คุณสามารถติ๊กเลือก “เริ่มที่…” เพื่อตั้งเวลาเริ่มต้นวิดีโอได้
  6. กดปุ่ม “คัดลอก” (Copy) ที่มุมขวาล่างเพื่อคัดลอกชุดโค้ดไว้

ขั้นตอนที่ 2: วิธีการนำโค้ดไปใส่ตามแพลตฟอร์มต่างๆ

1. ใส่ในโค้ด HTML (กรณีสร้างเว็บผ่าน Gemini Canvas)

นำโค้ด <iframe> ที่คัดลอกมา ไปวางไว้ภายในส่วน <body> ของไฟล์ HTML ในตำแหน่งที่คุณต้องการให้วิดีโอแสดงผล

ตัวอย่างโค้ดโครงสร้าง:

HTML
<div class="video-container">
  <h2>วิดีโอแนะนำบริการของเรา</h2>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/YOUR_VIDEO_ID" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</div>

2. ใส่ในหน้าเว็บ WordPress (ระบบ Gutenberg Editor)

  1. เข้าไปที่หน้าแก้ไขบทความหรือหน้าเว็บ (Edit Page)
  2. กดปุ่มเครื่องหมายบวก + เพื่อเพิ่มบล็อกใหม่
  3. ค้นหาและเลือกบล็อก Custom HTML (HTML กำหนดเอง)
  4. นำชุดโค้ด <iframe> ไปวางในบล็อกนั้น แล้วกดดูตัวอย่าง (Preview)
  5. (ข้อแนะนำ) บน WordPress คุณสามารถใช้บล็อก YouTube แล้วนำเพียงลิงก์ URL ปกติไปวางได้เลย ระบบจะแปลงเป็นวิดีโอให้อัตโนมัติ

3. ใส่ผ่าน Elementor Page Builder

  1. ลากวิดเจ็ต Video จากแถบเครื่องมือด้านซ้ายมาวางลงใน Section ที่ต้องการ
  2. ในแถบตั้งค่า (Source) ให้เลือกแหล่งที่มาเป็น YouTube
  3. ในช่อง Link ให้วาง URL ปกติของวิดีโอ (เช่น [https://www.youtube.com/watch?v=](https://www.youtube.com/watch?v=)…)
  4. สามารถตั้งค่าเพิ่มเติมจากเมนูได้ทันที เช่น Autoplay (เล่นอัตโนมัติ), Mute (ปิดเสียง), หรือ Loop (เล่นวนซ้ำ)
💡 ทริคระดับโปร: แก้ปัญหาวิดีโอล้นจอมือถือ (Responsive Video): โค้ด <iframe> มาตรฐานจาก YouTube จะล็อกขนาดความกว้างไว้ที่ width="560" ซึ่งทำให้ วิดีโอล้นขอบหน้าจอมือถือ

คุณสามารถสั่งให้ Gemini Canvas ปรับแต่งวิดีโอให้ย่อ-ขยายตามหน้าจออัตโนมัติ (Responsive) ด้วย Prompt นี้ได้เลย:

Prompt สำหรับสั่ง Gemini Canvas:

"ช่วยเขียน CSS ให้ iframe ของ YouTube แสดงผลแบบ Responsive โดยใช้อัตราส่วน 16:9 (aspect-ratio: 16/9) และกำหนดให้ width: 100% เพื่อให้วิดีโอแสดงผลพอดีกับทุกขนาดหน้าจอ"

ตัวอย่างโค้ด CSS ที่ Gemini จะสร้างให้:

CSS
.video-container iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px; /* เพิ่มขอบมนให้ดูโมเดิร์น */
}

เพียงเท่านี้ วิดีโอ YouTube บนหน้าเว็บของคุณก็จะปรับขนาดได้เป๊ะ สวยงาม ทั้งบนหน้าจอคอมพิวเตอร์ แท็บเล็ต และสมาร์ตโฟนแล้ว!

จัดให้ครับ! นี่คือเนื้อหาสำหรับ หน้า 16 เรื่อง การเติมภาพและวิดีโอในเว็บลงใน Initial Prompt เพื่อให้ Gemini Canvas สร้างเว็บไซต์ที่มีสื่อพร้อมใช้งานทันทีโดยไม่ต้องเสียเวลามาแก้ไขโค้ดทีหลัง

คอร์ส: สร้างเว็บไซต์ด้วย Gemini Canvas