การออกแบบเว็บไซต์ที่สามารถปรับเปลี่ยนได้ - วีดีโอ

ใช้คุณสมบัติ width

ถ้า width ถ้าคุณตั้งค่าคุณสมบัติเป็น 100% ตัวเครื่องเล่นวีดีโอจะตอบสนองและขยายขนาดหรือย่อขนาด:

video {
  width: 100%;
  height: auto;
}

โปรดระวังว่าในตัวอย่างที่เราให้นี้ ตัวเครื่องเล่นวีดีโอสามารถขยายขนาดไปเกินขนาดเดิมของมัน. ในหลายกรณี ทางแบบที่ดีขึ้นคือใช้คุณสมบัติ max-width.

ถ้าคุณ max-width เมื่อคุณตั้งค่าคุณสมบัติเป็น 100% ตัวเครื่องเล่นวีดีโอจะถูกย่อขนาดตามอัตราส่วน แต่จะไม่ขยายขนาดเกินขนาดเดิม:

video {
  max-width: 100%;
  height: auto;
}

เราหวังว่าจะเพิ่มวีดีโอในเว็บไซต์ตัวอย่างของเรา. วีดีโอจะทำให้เกิดขนาดเพื่อที่จะยังคงทำให้เกิดขนาดที่เต็มที่สุดที่สามารถใช้ได้:

video {
  width: 100%;
  height: auto;
}