Cách reponsive Videos với CSS

Ngày nay, phần lớn người dùng đều sử dụng chính những chiếc smartphone của mình để truy cập xem video, youtobe,.. vậy lên học cách reponsive video đang là mục rất cần thiết. Cho nên bài viết này tôi và các bạn sẽ cùng nhau tìm hiểu về nó.

Sử dụng thuộc tính Width.

Nếu thuộc tính độ rộng được đặt thành 100%, trình phát video sẽ phản hồi và mở rộng quy mô:

Ví dụ:

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

Ảnh minh họa:

reponsive video với width 100%

reponsive video với width 100%

Ở ví dụ trên, khi bạn sử dụng width :100%; thì khi chũng ta kéo hẹp lại kích cỡ màn hình video cũng sẽ tự thu lại theo kích cũa màn hình đó. Và đây cũng là một trong những cách reponsive phổ biến.

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

Ngoài cách sử dụng thuộc tính width  còn có một giải pháp tốt hơn trong nhiều trường hợp. Giải pháp đó là sử dụng thuộc tính max-width thay thế.

Nếu thuộc tính độ rộng tối đa (max-width) được đặt thành 100%. Trình phát video sẽ giảm tỷ lệ nếu có, nhưng không bao giờ mở rộng quy mô lớn hơn kích thước ban đầu của nó.

code ví dụ:

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

Ảnh minh họa:

reponsive video vs max-width

reponsive video vs max-width

Cách sử dụng max-width cũng như chũng ta thao tác với width vậy. Điểm hơn khi dử dụng thuộc tính của Max-width thì video sẽ có độ rộng do chũng ta định sẵn. Khác với width: 100%; khi sử dụng độ rộng của video sẽ đc chúng ta định sẵn hoặc độ rộng mặc định của video chứ không phủ rộng toàn màn hình như width.

Thêm một video vào trang web mẫu.

Đây cũng là một cách làm phổ biến ta có thể thêm một video vào một website đã viết sẵn css reponsive video. Nếu thêm một video trong trang web mẫu. Video sẽ được thay đổi kích thước để luôn chiếm hết dung lượng có sẵn.

Bạn có thể tham khảo thêm:

CSS Media Queries

Cách Responsive Images với CSS

CSS User Interface

Ở bài viết trên mình đã cùng nhau tìm hiểu về reponsive video đơn giản với css. Bài viết của mình đến đây là kết thúc hẹn gặp lại các bạn trong các bài học tiếp. Chúc các bạn có một ngày học tập vui vẻ.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *