การออกแบบเว็บที่ตอบสนอง - วิดีโอ
การใช้คุณสมบัติความกว้าง
หากwidth
ตั้งค่าพร็อพเพอร์ตี้เป็น 100% โปรแกรมเล่นวิดีโอจะตอบสนองและปรับขนาดขึ้นและลง:
ตัวอย่าง
video {
width: 100%;
height: auto;
}
โปรดสังเกตว่าในตัวอย่างด้านบน โปรแกรมเล่นวิดีโอสามารถปรับขนาดให้ใหญ่กว่าขนาดดั้งเดิมได้ ทางออกที่ดีกว่าในหลาย ๆ กรณีคือการใช้
max-width
คุณสมบัติแทน
การใช้คุณสมบัติความกว้างสูงสุด
หากmax-width
ตั้งค่าพร็อพเพอร์ตี้เป็น 100% โปรแกรมเล่นวิดีโอจะลดขนาดลงหากจำเป็น แต่จะไม่ขยายให้ใหญ่กว่าขนาดดั้งเดิม:
ตัวอย่าง
video {
max-width: 100%;
height: auto;
}
เพิ่มวิดีโอลงในหน้าเว็บตัวอย่าง
เราต้องการเพิ่มวิดีโอในหน้าเว็บตัวอย่างของเรา วิดีโอจะถูกปรับขนาดเพื่อใช้พื้นที่ว่างทั้งหมด:
ตัวอย่าง
video {
width: 100%;
height: auto;
}