Bạn có thể đặt video trong CSS không?

TRONG THẾ GIỚI của các bố cục linh hoạt và đáp ứng trên web, MỘT LOẠI PHƯƠNG TIỆN cản trở sự hài hòa hoàn hảo. băng hình. Có rất nhiều cách để video có thể được hiển thị trên trang web của bạn. Bạn có thể tự lưu trữ video và trình bày qua thẻ HTML5 . Bạn có thể đang sử dụng YouTube, Vimeo hoặc một số nhà cung cấp video khác cung cấp mã

0 để hiển thị video. Hãy cùng tìm hiểu cách làm cho chúng có chiều rộng linh hoạt trong khi vẫn duy trì chiều cao phù hợp dựa trên tỷ lệ khung hình của chúng

Trong mỗi tình huống nhúng video này, việc khai báo một giá trị tĩnh

1 và
2 là rất phổ biến.







Đoán xem? . Điều gì xảy ra nếu vùng chứa chính cho video đó thu hẹp hơn so với

3 đã khai báo?

Bạn có thể đặt video trong CSS không?
Đơn giản và giả tạo, nhưng vẫn lố bịch và đáng xấu hổ

Vì vậy, chúng ta không thể làm điều này?

Vâng, vâng, bạn có thể. Nếu bạn đang sử dụng video HTML5 tiêu chuẩn, điều đó sẽ làm cho video vừa với chiều rộng của vùng chứa. Điều quan trọng là bạn phải xóa khai báo

2 khi thực hiện việc này để tỷ lệ khung hình của video được duy trì khi video phát triển và thu nhỏ, kẻo bạn gặp phải các “thanh” khó xử để lấp đầy khoảng trống (không giống như hình ảnh, video thực tế duy trì tỷ lệ khung hình của nó

Bạn có thể đến đó thông qua CSS (và không phải lo lắng về những gì được khai báo trong HTML) như thế này

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}

Dự phòng nhúng CodePen

0 Video (YouTube, Vimeo, v.v. )

Thủ thuật nhỏ của chúng tôi ở trên sẽ không giúp ích gì cho chúng tôi khi xử lý video được gửi qua

0. Buộc chiều rộng thành 100% là hiệu quả, nhưng khi chúng tôi đặt
7, chúng tôi có chiều cao tĩnh là 150px, quá thấp đối với hầu hết video và tạo ra nhiều R&E hơn (Nực cười và đáng xấu hổ)

Dự phòng nhúng CodePen

May mắn thay, có một vài giải pháp khả thi ở đây. Một trong số đó đã được Thierry Koblentz tiên phong và trình bày trên A List Apart năm 2009. Tạo tỷ lệ nội tại cho video. Với kỹ thuật này, bạn bọc video trong một thành phần khác có tỷ lệ khung hình nội tại, sau đó định vị tuyệt đối video trong đó. Điều đó mang lại cho chúng tôi chiều rộng linh hoạt với chiều cao hợp lý mà chúng tôi có thể tin tưởng

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Dự phòng nhúng CodePen

Có một sự thích ứng thông minh về điều này cho phép bạn điều chỉnh tỷ lệ khung hình ngay từ HTML, như