วิธีสร้างการฝังวิดีโอ YouTube ที่ตอบสนองด้วย CSS

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

หากคุณคัดลอกโค้ดวิดีโอที่ฝังจาก YouTube และคุณจะได้รับ <iframe> เสื้อคลุมที่มีลักษณะคล้ายสิ่งนี้:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/uga8GWzdv3c"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

ขออภัย iframes ต้องการความสูงและความกว้างคงที่เพื่อแสดงด้วยอัตราส่วนภาพที่ถูกต้องในเบราว์เซอร์ ทำให้ iframes เข้ากันไม่ได้กับการออกแบบที่ตอบสนองตั้งแต่แกะกล่อง

โชคดีที่คุณสามารถฝังวิดีโอได้ด้วยการห่อ iframe ในคอนเทนเนอร์หลัก:

<div class="youtube-video-container">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/uga8GWzdv3c"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

แล้วจัดรูปแบบคอนเทนเนอร์วิดีโอของคุณด้วย CSS:

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

กำลังคำนวณอัตราส่วนกว้างยาว

คุณกำลังสงสัยว่า 56.25% . คืออะไร padding-top เกี่ยวกับ? โดยอิงตามอัตราส่วนภาพของวิดีโอ YouTube ซึ่งเท่ากับ 16/9

ในการรับค่าช่องว่างภายในที่แน่นอนเพื่อให้คอนเทนเนอร์วิดีโอของคุณตอบสนองได้ คุณเพียงแค่ต้องค้นหาว่าค่าความสูงเป็นค่าความกว้างกี่ %:

9/16 * 100 =56.25%

9 คือ 56.25% จาก 16

หากอัตราส่วนกว้างยาวของวิดีโอที่ฝังของคุณคือ 4:3 คุณจะคำนวณช่องว่างด้านบนสุดของคอนเทนเนอร์วิดีโอดังนี้:

3/4 * 100 =75%

เป็นต้น