Thiết kế web đáp ứng - Video
Sử dụng Thuộc tính Chiều rộng
Nếu thuộc width
tính được đặt thành 100%, trình phát video sẽ phản hồi và tăng giảm tỷ lệ:
Thí dụ
video {
width: 100%;
height: auto;
}
Lưu ý rằng trong ví dụ trên, trình phát video có thể được thu nhỏ để lớn hơn kích thước ban đầu của nó. Một giải pháp tốt hơn, trong nhiều trường hợp, sẽ là sử dụng
max-width
tài sản thay thế.
Sử dụng Thuộc tính chiều rộng tối đa
Nếu thuộc max-width
tính được đặt thành 100%, trình phát video sẽ giảm tỷ lệ nếu phải, nhưng không bao giờ tăng tỷ lệ để lớn hơn kích thước ban đầu:
Thí dụ
video {
max-width: 100%;
height: auto;
}
Thêm video vào trang web mẫu
Chúng tôi muốn thêm video vào trang web mẫu của chúng tôi. Video sẽ được thay đổi kích thước để luôn chiếm hết dung lượng có sẵn:
Thí dụ
video {
width: 100%;
height: auto;
}