[RWD Bài 5] Responsive video với HTML CSS

Responsive Video với HTML CSS – ảnh minh họa

Dưới đây chúng ta sẽ tiến hành responsive video thông qua sử dụng HTML CSS, cách làm cũng khá đơn giản thôi các bạn nhé !

Cách Responsive video với HTML CSS

Tương tự như hình ảnh, responsive video là vấn đề cần quan tâm để cho nó hiển thị vừa khít trên các thiết bị, tận dụng tối đa kích thước màn hình nhưng không làm cho khung video mất cân xứng.

Rất đơn giản để video co giãn theo chiều ngang, tức là độ rộng của nó thay đổi theo sự co giãn của màn hình thì bạn sử dụng cấu trúc:

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

• Trong đó độ rộng width có giá trị 100% tức là nó sẽ vừa khít với độ rộng của vùng chứa bên ngoài cũng như màn hình.
• Chiều cao height giá trị auto tức nó sẽ tự điều chỉnh chiều cao theo sự thay đổi của chiều rộng video cũng như kích thước màn hình.

Ví dụ responsive video với HTML CSS

Đây là một ví dụ từ w3schools.com, bạn có thể mở nó trên CodePen để xem demo cũng như sửa giá trị lại.

See the Pen
Responsive video với HTML CSS by Hocban.vn (@hocbanvn)
on CodePen.

Rất dễ hình dung đúng không nào, bài hướng dẫn đến đây là kết thúc. Nếu bạn đó điều gì thắc mắc hoặc góp ý thì vui lòng bình luận phía bên dưới, cảm ơn bạn !

Bài trước đó và tiếp theo

• [RWD Bài 4] Responsive hình ảnh (image) với HTML CSS