ชั้น 29 ออฟฟิศเศส แอท เซ็นทรัลเวิลด์

999/9 พระราม 1 กรุงเทพฯ 10330

บริการตลอด 24 ชั่วโมง

ทุกวัน ไม่เว้นวันหยุด

0-2107-3466

โทรเลยดิจะรออะไร

Home » HTML » HTML YouTube Videos

HTML YouTube Videos

วิธีที่ง่ายที่สุดในการเล่นวิดีโอใน HTML คือ ใช้ YouTube

ปัญหาเรื่องรูปแบบวิดีโอ ?

การแปลงไฟล์วิดีโอให้เป็นหลาย ๆ รูปแบบอาจยุ่งยากและใช้เวลามาก วิธีที่ง่ายกว่าคือ ให้ YouTube เป็นผู้เล่นวิดีโอในหน้าเว็บของคุณแทน

รหัสวิดีโอของ YouTube

เมื่อคุณอัปโหลดหรือเล่นวิดีโอใน YouTube
YouTube จะแสดงรหัสของวิดีโอ (เช่น tgbNymZ7vqY)
คุณสามารถใช้รหัสนี้เพื่อแสดงวิดีโอในหน้า HTML ของคุณได้

การแสดงวิดีโอ YouTube ในหน้า HTML

  • อัปโหลดวิดีโอของคุณไปที่ YouTube
  • จดจำรหัสของวิดีโอ (Video ID)
  • สร้างแท็ก <iframe> ในหน้าเว็บของคุณ
  • ตั้งค่า src ให้ชี้ไปที่ URL ของวิดีโอบน YouTube
  • ใช้ width และ height เพื่อกำหนดขนาดของเครื่องเล่น
  • เพิ่มพารามิเตอร์อื่น ๆ ใน URL ตามต้องการ (ดูตัวอย่างด้านล่าง)
				
					<iframe width="420" height="345" 
src="https://www.youtube.com/embed/D-45GIp5Ejk">
</iframe>
				
			

YouTube Autoplay + Mute

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

แต่ควรระวังการเล่นอัตโนมัติ (autoplay) อาจรบกวนผู้เข้าชมเว็บไซต์ได้

หมายเหตุ: เบราว์เซอร์ในตระกูล Chromium เช่น Chrome, Edge ส่วนใหญ่ไม่อนุญาตให้เล่นอัตโนมัติ เว้นแต่จะเป็น แบบปิดเสียง (muted)

หากต้องการให้วิดีโอเริ่มเล่นอัตโนมัติแบบปิดเสียง ให้เพิ่ม mute=1 ต่อจาก autoplay=1
				
					<iframe width="420" height="345" 
src="https://www.youtube.com/embed/D-45GIp5Ejk?autoplay=1&mute=1">
</iframe>
				
			

YouTube Playlist

ถ้าต้องการให้เล่นวิดีโอหลายตัวต่อกัน
ให้ใช้พารามิเตอร์ playlist แล้วใส่รหัสวิดีโอหลายตัวคั่นด้วยเครื่องหมายจุลภาค (,)

YouTube Loop (เล่นซ้ำ)

หากต้องการให้วิดีโอเล่นซ้ำ ให้เพิ่มพารามิเตอร์ playlist และ loop ลงใน URL
  • loop=0 (ค่าเริ่มต้น) วิดีโอจะเล่นเพียงครั้งเดียว
  • loop=1 วิดีโอจะเล่นซ้ำไปเรื่อย ๆ
				
					<iframe width="420" height="345" 
src="https://www.youtube.com/embed/D-45GIp5Ejk?playlist=D-45GIp5Ejk&loop=1">
</iframe>
				
			

YouTube Controls

หากไม่ต้องการให้แสดงปุ่มควบคุมวิดีโอ เช่น ปุ่มเล่น/หยุด ให้เพิ่ม controls=0 ใน URL
  • controls=0 ซ่อนปุ่มควบคุม
  • controls=1 (ค่าเริ่มต้น) แสดงปุ่มควบคุม
				
					<iframe width="420" height="345" 
src="https://www.youtube.com/embed/D-45GIp5Ejk?controls=0">
</iframe>

				
			
Categories