ฝัง YouTube playlist

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

อธิบายโค้ด 

<iframe>:

• <iframe> คือ HTML element ที่ใช้สำหรับฝังเนื้อหาภายนอก เช่น วิดีโอจาก YouTube หรือเว็บไซต์อื่นๆ ลงในหน้าเว็บ

• ใช้แสดงผลวิดีโอหรือเนื้อหาจากแหล่งภายนอกโดยไม่ต้องดาวน์โหลดไฟล์นั้นมาเก็บที่เว็บไซต์ของเรา

width="560" และ height="315":

• กำหนดขนาดของ iframe ที่จะแสดงผลในหน้าเว็บ

• width="560" กำหนดความกว้างของ iframe เป็น 560 พิกเซล

• height="315" กำหนดความสูงของ iframe เป็น 315 พิกเซล

• ขนาดนี้เป็นขนาดมาตรฐานที่ใช้สำหรับการฝังวิดีโอจาก YouTube ซึ่งสามารถปรับให้เหมาะสมกับการออกแบบเว็บไซต์

src="https://www.youtube.com/embed/videoseries?si=wxyz1234;list=abc1234":

• src คือแหล่งที่มาของเนื้อหาที่จะแสดงใน iframe

• ในที่นี้ ค่าของ src เป็น URL ที่นำไปยังรายการวิดีโอ (playlist) บน YouTube โดยเฉพาะ

  • https://www.youtube.com/embed/videoseries คือ URL สำหรับฝังรายการวิดีโอ

  • list=abcd1234 คือ ID ของรายการวิดีโอ ที่ต้องการฝัง

  • si=wxyz1234 คือการส่งค่าพารามิเตอร์เพิ่มเติมเพื่อควบคุมการแสดงผลบางประการ

title="YouTube video player":

• title คือการให้คำอธิบายกับ iframe ซึ่งช่วยให้เครื่องมือช่วยการเข้าถึง (เช่น Screen Readers) เข้าใจว่าใน 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

referrerpolicy="strict-origin-when-cross-origin":

• referrerpolicy คือการตั้งค่าการส่งข้อมูล referrer (แหล่งที่มาของการเชื่อมโยง) เมื่อมีการเข้าถึงเนื้อหาภายนอก

• strict-origin-when-cross-origin หมายความว่าเบราว์เซอร์จะส่งข้อมูลเกี่ยวกับแหล่งที่มาของการเชื่อมโยง (referrer) เฉพาะในกรณีที่การร้องขอข้อมูลมาจากแหล่งเดียวกัน (same-origin) หรือถ้าเป็นการร้องขอข้ามโดเมน (cross-origin) จะส่งเฉพาะข้อมูลจากแหล่งที่มา (origin) เท่านั้น

allowfullscreen:

• allowfullscreen คือการอนุญาตให้ผู้ใช้สามารถเปิดวิดีโอในโหมด เต็มหน้าจอ ได้

• ถ้าไม่ใส่ allowfullscreen ผู้ใช้จะไม่สามารถขยายวิดีโอให้เต็มหน้าจอได้