YouTube HTML กว้างเต็มหน้าจอ Responsive

YouTube HTML กว้างเต็มหน้าจอ Responsive บทความนี้สอนวิธีการตั้งค่า หรือเขียนโปรแกรมให้ iframe ของ YouTube HTML แสดงผลแบบ Responsive Design คือกว้างเต็มหน้าจอที่แสดงผล สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง YouTube HTML กว้างเต็มหน้าจอ Responsive

1. ติดตั้ง Bootstrap Framework

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

2. เขียน CSS และสร้างส่วนแสดงผล YouTube HTML

<style>
.wrapper {
    display: flex;
    justify-content: center;
}
iframe {
    max-width: 100%;
    max-height: 100%;
}
</style>

<div class="wrapper">
  <div class="ratio ratio-16x9">
    <iframe 
        src="https://www.youtube.com/embed/xxxxxx"
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  </div>
 </div>

YouTube HTML กว้างเต็มหน้าจอ Responsive จากตัวอย่างมีลำดับขั้นตอนดังนี้

1. ติดตั้ง Bootstrap Framework โดยการเรียกใช้ไฟล์ CSS

2. สร้าง class ชื่อ wrapper สำหรับแสดงผลแบบ display flex และวีดีโอให้อยู่ตรงกลาง

3. กำหนดให้ iframe กว้าง และสูง 100% ด้วย max-width และ max-height

4. ใช้ class wrapper และ ratio ratio-16x9 กับการแสดงผลวีดีโอ YouTube ด้วยแท็ก iframe