Thay đổi kích thước video html cho phù hợp

Trong ví dụ bên dưới, chúng tôi sử dụng giá trị "cover" của thuộc tính object-fit. Khi sử dụng giá trị "bìa", tỷ lệ khung hình của nội dung được định cỡ trong khi điền vào hộp nội dung của phần tử. Nó sẽ được cắt bớt để phù hợp với hộp nội dung

Xem một ví dụ khác trong đó kích thước hình ảnh được đặt theo cách thủ công và thuộc tính object-fit cũng được đặt. Trong trường hợp này, khi trình duyệt được thay đổi kích thước, hình ảnh sẽ giữ nguyên tỷ lệ khung hình và sẽ không bị thay đổi kích thước theo vùng chứa

Trong ví dụ tiếp theo, chúng tôi sử dụng các thuộc tính chiều rộng tối đa và chiều cao tối đa. Thuộc tính chiều cao tối đa đặt chiều cao tối đa của phần tử và thuộc tính chiều rộng tối đa đặt chiều rộng tối đa của phần tử. Để thay đổi kích thước hình ảnh theo tỷ lệ, hãy đặt chiều cao hoặc chiều rộng thành "100%", nhưng không phải cả hai. Nếu bạn đặt cả hai thành "100%", hình ảnh sẽ bị kéo dài

  
    Title of the document
    
    
      
Portrait Div







Landscape Div



Square Div

Để sử dụng hình ảnh làm nền CSS, hãy sử dụng thuộc tính kích thước nền. Thuộc tính này cung cấp hai giá trị đặc biệt. chứa và bao phủ. Hãy xem các ví dụ với các giá trị này

Tạo video có chiều rộng và chiều cao chính xác thật dễ dàng, nhưng làm cho video đó chia tỷ lệ với kích thước của màn hình đồng thời duy trì tỷ lệ khung hình của nó khó hơn nhiều, đặc biệt là khi nhúng video từ một nơi nào đó như YouTube

Thẻ video HTML

May mắn thay, thẻ video trong HTML giúp tạo video phản hồi cực kỳ dễ dàng. Tất cả những gì bạn cần làm là đặt chiều rộng thành 100% và chiều cao thành tự động

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

Thao tác này sẽ tạo video lấp đầy toàn bộ phần gốc và chiều cao của video sẽ được tính toán tự động dựa trên chiều rộng để video duy trì tỷ lệ khung hình hiện tại bất kể kích thước màn hình

iframe

Thật không may, iframe gần như không đơn giản như thẻ video. Nếu chúng ta thử thủ thuật đặt chiều rộng thành 100% ở trên và chiều cao thành tự động, chúng ta sẽ nhận được một phần tử chia tỷ lệ chính xác cho chiều rộng của nó, nhưng chiều cao sẽ luôn là 150px. Điều này là do iframe mặc định cao 150px và bỏ qua tỷ lệ khung hình của video được nhúng

Ví dụ: nếu bạn dự định nhúng video vào iframe từ YouTube, thì bạn cần phải sáng tạo hơn nhiều

Cách tốt nhất để xử lý tình huống này là bọc khung nội tuyến trong vùng chứa sẽ duy trì tỷ lệ khung hình chính xác và sau đó chỉ cần lấp đầy vùng chứa đó bằng khung nội tuyến. Đây là mã đầy đủ và sau đó tôi sẽ giải thích điều gì đang thực sự xảy ra

<div class="video-container">
  <iframe src="...">iframe>
div>

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Thí dụ

Hãy thử thay đổi kích thước ví dụ bằng cách kéo vào góc dưới cùng bên phải để xem tỷ lệ video

Có lẽ bạn đang xem đoạn mã này và tự hỏi nó thực sự hoạt động như thế nào và tôi không trách bạn. Đoạn mã này sử dụng thủ thuật CSS với phần đệm để làm cho mọi thứ hoạt động

Khi bạn sử dụng giá trị phần trăm để đệm, giá trị này sẽ luôn tương ứng với chiều rộng của phần tử. Điều này có nghĩa là nếu bạn có padding-top: 50% trên phần tử rộng 400px thì sẽ có 200px phần đệm trên đầu phần tử bất kể phần tử đó cao bao nhiêu. Chúng ta có thể sử dụng kiến ​​thức này để đặt phần đệm của phần tử thành tỷ lệ phần trăm giữa chiều rộng và chiều cao của chúng ta

Ví dụ: nếu video là 16x9 thì tỷ lệ phần trăm cho phần đệm sẽ chỉ là 9/16 tức là 56. 25%

Chỉ với một thay đổi nhỏ đối với mã của chúng tôi, chúng tôi có thể điều chỉnh mọi tỷ lệ khung hình

<div class="video-container" style="--aspect-ratio: 2 / 3;">
  <iframe src="...">iframe>
div>

.video-container {
  position: relative;
  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
  height: 0;
  width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Bằng cách thay đổi chỉ một dòng trong CSS, giờ đây chúng ta có thể chuyển bất kỳ tỷ lệ khung hình tùy chỉnh nào và nó sẽ được tính toán và chuyển đổi thành tỷ lệ phần trăm chính xác. Nếu không có tỷ lệ khung hình nào được cung cấp, nó sẽ trở về tỷ lệ khung hình 16x9 tiêu chuẩn của chúng tôi

Sự kết luận

Tạo một video theo tỷ lệ khung hình ở mọi kích thước màn hình là điều khó hiểu, nhưng may mắn là mã để làm như vậy ngắn và dễ mở rộng

Làm cách nào để thêm kích thước video trong HTML?

Bạn có thể nhúng video vào HTML không?

Tại sao video của tôi không phát ở định dạng HTML?