พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน YouTube Video

การใช้งาน YouTube Video ใน HTML5 สามารถทำได้หลายวิธี โดยสามารถนำไปประยุกต์ใช้ในเว็บเพจได้หลากหลายรูปแบบ เรามาดูกันว่าใช้แบบไหนได้บ้าง

การฝัง (Embed) วิดีโอจาก YouTube

วิธีพื้นฐานที่สุดคือการใช้ iframe เพื่อนำวิดีโอจาก YouTube มาฝังในเว็บเพจ HTML5

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedded YouTube Video</title>
</head>
<body>
    <h1>Embedded YouTube Video Example</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>
  • VIDEO_ID คือตัวอักษรหลัง v= ในลิงก์ของวิดีโอบน YouTube เช่น หากลิงก์คือ https://www.youtube.com/watch?v=OcERcOI8SBI ตัว VIDEO_ID คือ OcERcOI8SBI
  • allowfullscreen ช่วยให้สามารถขยายวิดีโอให้เต็มหน้าจอได้

การปรับขนาดวิดีโอให้ตอบสนอง (Responsive)

วิดีโอที่ฝังด้วย iframe อาจไม่ตอบสนองต่อขนาดของหน้าจอ วิธีแก้ไขคือใช้ CSS เพื่อให้วิดีโอตอบสนองได้ทุกขนาดหน้าจอ

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive YouTube Video</title>
    <style>
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* อัตราส่วน 16:9 */
            height: 0;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <h1>Responsive YouTube Video Example</h1>
    <div class="video-container">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID" 
                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
                gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</body>
</html>
  • .video-container ช่วยปรับให้วิดีโอตอบสนองได้กับหน้าจอทุกขนาด โดยการตั้งค่า padding-bottom: 56.25% เพื่อรักษาอัตราส่วน 16:9 ของวิดีโอ

การตั้งค่าเริ่มเล่นอัตโนมัติ (Autoplay)

สามารถตั้งค่าวิดีโอให้เริ่มเล่นอัตโนมัติเมื่อเปิดเว็บเพจโดยเพิ่มพารามิเตอร์ autoplay=1 ใน URL

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autoplay YouTube Video</title>
</head>
<body>
    <h1>Autoplay YouTube Video Example</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
            gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
  • การเพิ่ม ?autoplay=1 ลงในลิงก์ของวิดีโอจะทำให้วิดีโอเริ่มเล่นทันทีที่โหลดหน้าเว็บเพจ

การเล่นวิดีโอซ้ำ (Loop)

สามารถตั้งค่าให้วิดีโอเล่นซ้ำได้โดยใช้พารามิเตอร์ loop=1 และระบุ playlist เท่ากับ VIDEO_ID

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loop YouTube Video</title>
</head>
<body>
    <h1>Loop YouTube Video Example</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?loop=1&playlist=VIDEO_ID" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
            gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
  • การเพิ่ม loop=1 และ playlist=VIDEO_ID จะทำให้วิดีโอเล่นซ้ำเมื่อจบ

การซ่อนส่วนควบคุม (Hide Controls)

หากต้องการซ่อนส่วนควบคุมวิดีโอสามารถทำได้โดยเพิ่มพารามิเตอร์ controls=0

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Controls on YouTube Video</title>
</head>
<body>
    <h1>Hide Controls YouTube Video Example</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?controls=0" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
            gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
  • controls=0 จะซ่อนปุ่มควบคุมวิดีโอจากผู้ใช้งาน

การเริ่มเล่นวิดีโอที่เวลาเฉพาะ (Start at Specific Time)

สามารถตั้งค่าวิดีโอให้เริ่มเล่นจากเวลาที่ระบุโดยใช้พารามิเตอร์ start=

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start YouTube Video at Specific Time</title>
</head>
<body>
    <h1>Start YouTube Video at Specific Time Example</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?start=60" 
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
            gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
  • start=60 จะทำให้วิดีโอเริ่มเล่นจากวินาทีที่ 60

สรุป

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ