Thiết kế trang web tương tác - Video

Sử dụng thuộc tính width

Nếu width Nếu thuộc tính được thiết lập thành 100%, trình phát video sẽ phản hồi và phóng to/thu nhỏ:

Mô hình

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

Thử ngay

Lưu ý rằng trong ví dụ trên, trình phát video có thể phóng to lớn hơn kích thước ban đầu. Trong nhiều trường hợp, giải pháp tốt hơn là thay thế bằng thuộc tính max-width.

Sử dụng thuộc tính max-width

Nếu max-width Nếu thuộc tính được thiết lập thành 100%, trình phát video sẽ thu nhỏ theo tỷ lệ nhưng sẽ không phóng to lớn hơn kích thước ban đầu:

Mô hình

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

Thử ngay

Thêm video vào trang mẫu

Chúng tôi hy vọng sẽ thêm video vào trang mẫu. Video sẽ được điều chỉnh kích thước để luôn chiếm toàn bộ không gian có thể có:

Mô hình

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

Thử ngay