วิดีโอ YouTube HTML

อันดับที่ง่ายที่สุดในการรวมวิดีโอบน HTML คือใช้ YouTube

วิญญาณวิดีโอแบบอื่นๆ?

การเปลี่ยนแปลงฟอร์มตัวของวิดีโออาจเป็นสิ่งที่ยากและใช้เวลา

แนวทางที่ง่ายและเรียบร้อยขึ้นกับการที่จะให้ YouTube เล่นวิดีโอบนเว็บของคุณ

YouTube Video Id

ขณะที่บันทึก (หรือเล่น) วิดีโอ YouTube จะแสดง id หนึ่ง (เช่น ih1l6wb7LhU)

คุณสามารถใช้ id นี้ และอ้างอิงวิดีโอของคุณในรหัส HTML ได้

ใส่วิดีโอ YouTube ใน HTML

เพื่อเล่นวิดีโอบนเว็บ เรียกร้องให้ทำตามขั้นตอนดังนี้:

  • อัพโหลดวิดีโอไปยัง YouTube
  • จดจำ id ของวิดีโอ
  • เข้ารหัสในเว็บปลายทางของคุณ <iframe> องค์ประกอบ
  • ให้ src ตัวแปรสำหรับไปที่ URL ของวิดีโอ
  • ใช้ width และ height ตัวแปรสำหรับขนาดโปรแกรมเล่นวิดีโอ
  • เพิ่มค่าอื่นๆ ใน URL (ดูลงไปด้านล่าง)

ตัวอย่าง

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>

ลองทดสอบด้วยตัวเอง

YouTube Autoplay + Mute

คุณสามารถเปิดเสียงวิดีโออัตโนมัติเมื่อผู้ใช้เข้าหน้าเว็บโดยเพิ่ม autoplay=1 ใน URL ของ YouTube ได้ แต่การเริ่มเล่นวิดีโออัตโนมัติอาจทำให้ผู้เข้าชมรู้สึกขัดแย้ง!

注意：ในหลายกรณี บราวเซอร์ Chromium ไม่อนุญาตให้เล่นโดยอัตโนมัติ แต่ยังอนุญาตให้เล่นโดยอัตโนมัติเมื่อมีการปิดเสียง

ใน autoplay=1 หลังจากที่เพิ่ม mute=1จะทำให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติ (แต่มีการปิดเสียง)

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>

ลองทดสอบด้วยตัวเอง

YouTube Playlist

รายชื่อวิดีโอที่ต้องการเล่น แยกด้วยคอมมา (ไม่รวม URL ต้นฐาน)

YouTube Loop

เพิ่ม loop=1 จะทำให้วิดีโอของคุณวนเลวงตลอดช่วงเวลา

ค่า 0 (ปริมาณเริ่มต้น): วิดีโอจะเล่นครั้งเดียว

ค่า 1: วิดีโอจะวนเลวง (ตลอดช่วงเวลา)

YouTube - Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>

ลองทดสอบด้วยตัวเอง

YouTube Controls

เพิ่ม controls=0 จะทำให้เครื่องเล่นวิดีโอไม่แสดงควบคุม

ค่า 0: ไม่แสดงควบคุมเครื่องเล่น

ค่า 1 (ปริมาณเริ่มต้น): การแสดงควบคุมเครื่องเล่น

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>

ลองทดสอบด้วยตัวเอง