วิธีฝัง YouTube Shorts บนเว็บ

โค้ดนี้ใช้เพื่อฝัง YouTube Shorts (วิดีโอสั้น) ลงในเว็บไซต์ โดยการใช้ iframe เพื่อแสดงวิดีโอจาก YouTube โดยตรงในหน้าเว็บของคุณ โดยที่ผู้ใช้สามารถดูวิดีโอได้โดยไม่ต้องออกจากเว็บไซต์ สามารถตั้งค่าขนาดของ iframe, การอนุญาตให้เล่นอัตโนมัติ, การแสดงในโหมดเต็มหน้าจอ, และการใช้งานฟีเจอร์ต่างๆ เช่น accelerometer, autoplay, และ clipboard-write เป็นต้น 

อธิบายแต่ละส่วนในโค้ด

<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 ผู้ใช้จะไม่สามารถขยายวิดีโอให้เต็มหน้าจอได้