โค้ดนี้ใช้เพื่อฝัง YouTube Shorts (วิดีโอสั้น) ลงในเว็บไซต์ โดยการใช้ iframe เพื่อแสดงวิดีโอจาก YouTube โดยตรงในหน้าเว็บของคุณ โดยที่ผู้ใช้สามารถดูวิดีโอได้โดยไม่ต้องออกจากเว็บไซต์ สามารถตั้งค่าขนาดของ iframe, การอนุญาตให้เล่นอัตโนมัติ, การแสดงในโหมดเต็มหน้าจอ, และการใช้งานฟีเจอร์ต่างๆ เช่น accelerometer, autoplay, และ clipboard-write เป็นต้น
การฝัง YouTube Shorts (วิดีโอสั้นจาก YouTube) ลงในเว็บไซต์ โดยใช้แท็ก <iframe> ซึ่งช่วยให้สามารถแสดงวิดีโอจาก YouTube ในหน้าเว็บได้
<iframe width="315" height="560"
src="https://www.youtube.com/embed/<Shorts_video_code>"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
อธิบายแต่ละส่วนในโค้ด
<iframe>:
<iframe> คือ HTML element ที่ใช้สำหรับฝังเนื้อหาภายนอกลงในหน้าเว็บ เช่น วิดีโอจาก YouTube หรือเว็บไซต์อื่นๆ
ใช้เพื่อแสดงเนื้อหาจากแหล่งภายนอกในหน้าเว็บของเราโดยไม่ต้องโหลดเนื้อหามาไว้ที่เว็บไซต์
width="315" และ height="560":
กำหนดขนาดของ iframe ที่ใช้แสดงวิดีโอ
width="315" กำหนดความกว้างของ iframe เป็น 315 พิกเซล
height="560" กำหนดความสูงของ iframe เป็น 560 พิกเซล
ขนาดนี้สามารถปรับให้เหมาะสมตามการออกแบบของเว็บไซต์
src="https://www.youtube.com/embed/<Shorts_video_code>":
src (source) คือแหล่งที่มาของเนื้อหาที่จะแสดงใน iframe
ในกรณีนี้ เป็น URL ของวิดีโอ YouTube ที่ต้องการฝัง (embed)
https://www.youtube.com/embed/<Shorts_video_code> จะเป็น URL ที่ YouTube สร้างขึ้นสำหรับฝังวิดีโอ
<Shorts_video_code> คือ รหัสเฉพาะ ของวิดีโอ Shorts จาก YouTube ที่ต้องการฝังลงในเว็บไซต์
รหัสนี้จะต้องแทนที่ด้วยรหัสจริงของวิดีโอ Shorts เช่น abc123xyz
title="YouTube video player":
title คือคำอธิบายสำหรับ iframe ที่ช่วยให้เครื่องมือช่วยการเข้าถึง (accessibility tools) เข้าใจว่าใน iframe นี้เป็นตัวเล่นวิดีโอจาก YouTube
การกำหนดคำอธิบายนี้ช่วยให้การเข้าถึงเว็บไซต์ง่ายขึ้นสำหรับผู้ใช้งานที่ต้องการความช่วยเหลือ
frameborder="0":
กำหนดว่า ไม่มีกรอบ รอบๆ iframe
การตั้งค่า frameborder="0" ทำให้ iframe ดูสะอาดตา ไม่มีเส้นขอบที่รบกวนการแสดงผล
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share":
allow ใช้เพื่อกำหนดสิทธิในการใช้งานฟีเจอร์ต่างๆ ภายใน iframe
accelerometer: อนุญาตให้ใช้เซ็นเซอร์การเคลื่อนไหว (สำหรับการหมุนหน้าจอ)
autoplay: อนุญาตให้วิดีโอเล่นโดยอัตโนมัติเมื่อโหลด
clipboard-write: อนุญาตให้คัดลอกข้อมูลจาก iframe ไปยังคลิปบอร์ด
encrypted-media: อนุญาตให้เล่นเนื้อหาที่มีการเข้ารหัส เช่น วิดีโอที่ต้องการการอนุญาตพิเศษ
gyroscope: อนุญาตให้ใช้งานเซ็นเซอร์ของจอ (เช่น สำหรับการแสดงภาพ 360 องศา)
picture-in-picture: อนุญาตให้วิดีโอแสดงในโหมด Picture-in-Picture (โหมดที่ให้วิดีโอแสดงในมุมจอขณะที่ใช้แอปอื่น)
web-share: อนุญาตให้แชร์เนื้อหาผ่าน Web Share API
allowfullscreen:
allowfullscreen คือการอนุญาตให้ผู้ใช้สามารถเปิดวิดีโอในโหมด เต็มหน้าจอ ได้
หากไม่ใส่ allowfullscreen ผู้ใช้จะไม่สามารถขยายวิดีโอให้เต็มหน้าจอได้