โค้ดนี้ใช้เพื่อฝัง YouTube playlist (รายการวิดีโอ) ลงในเว็บไซต์ โดยการใช้ <iframe> เพื่อแสดงวิดีโอในรายการนั้นๆ ซึ่งจะทำให้ผู้ชมสามารถดูวิดีโอต่อเนื่องจากรายการได้โดยไม่ต้องออกจากหน้าเว็บ สามารถตั้งค่าขนาดของ iframe, การอนุญาตให้เล่นอัตโนมัติ, การแสดงในโหมดเต็มหน้าจอ, และการใช้งานฟีเจอร์ต่างๆ เช่น accelerometer, autoplay, และ clipboard-write เป็นต้น
ฝัง YouTube playlist (รายการวิดีโอ) ลงในหน้าเว็บโดยใช้แท็ก <iframe> ซึ่งช่วยให้สามารถแสดงวิดีโอหรือรายการวิดีโอจาก YouTube ในหน้าเว็บของเราได้ โดยไม่ต้องโหลดไฟล์วิดีโอมาเก็บในเว็บไซต์
<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?si=dSDUKXZm3fVXQmRO&list=PL5wd9F_ZUM5Y1nHzlidp-EK_3Pd3-s7Y2"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
อธิบายโค้ด
<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 ผู้ใช้จะไม่สามารถขยายวิดีโอให้เต็มหน้าจอได้