72. RWD Video Trong CSS Responsive

RWD Video trong CSS Responsive:

Tương tự như hình ảnh, việc làm cho video phản ánh kích thước màn hình và thiết bị là một phần quan trọng của Responsive Web Design. Điều này thường được thực hiện bằng cách sử dụng CSS để điều chỉnh kích thước của video để phù hợp với kích thước màn hình hiển thị.

Dưới đây là một ví dụ về cách điều chỉnh video trong RWD:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .video-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }

    .video-container video {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <video controls>
      <source src="your-video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một phần tử .video-container để đặt video và điều chỉnh kích thước của nó.
Sử dụng max-width: 800px; để giới hạn kích thước tối đa của .video-container để tránh video trở nên quá lớn trên các màn hình rộng.
Trong phần tử .video-container video, sử dụng max-width: 100%; để làm cho video co lại theo kích thước của .video-container. Thuộc tính height: auto; giúp video tự động thay đổi chiều cao để giữ nguyên tỷ lệ.
Chúng ta sử dụng thẻ <video> để nhúng video vào trang web. Đoạn mã trong thẻ <source> định nghĩa đường dẫn và kiểu định dạng của video.

Khi kích thước màn hình thay đổi, video sẽ tự động thay đổi kích thước để phù hợp với không gian hiển thị, giúp tạo trải nghiệm tốt hơn trên các thiết bị khác nhau.

Leave a Comment Cancel Reply