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?

Đơ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ư

.videoWrapper {
  ...
  /* falls back to 16/9, but otherwise uses ratio from HTML */
  padding-bottom: calc[var[--aspect-ratio, .5625] * 100%]; 
}

Một số nhúng video trường học cũ sử dụng thẻ

8 và

9, vì vậy nếu bạn đang cố gắng trở nên toàn diện, hãy cập nhật bộ chọn trình bao bọc đó thành

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object { }

Nhưng, nhưng… tỷ lệ khung hình, nội dung cũ, người dùng không chuyên về công nghệ, v.v.

Kỹ thuật trên thật tuyệt vời, nhưng nó có một số hạn chế có thể xảy ra

1. Nó yêu cầu một phần tử bao bọc, vì vậy chỉ cần sao chép và dán thẳng mã từ YouTube là xong. Người dùng sẽ cần phải hiểu biết hơn một chút
2. Nếu bạn có nội dung cũ và đang thiết kế lại để trở nên linh hoạt thì tất cả các video cũ đều cần điều chỉnh HTML
3. Tất cả các video cần phải có cùng tỷ lệ khung hình. Nếu không, chúng sẽ bị ép vào một tỷ lệ khung hình khác và bạn sẽ nhận được “các thanh”. Hoặc, bạn sẽ cần một hộp công cụ gồm các tên lớp mà bạn có thể áp dụng để điều chỉnh nó, đây là một sự phức tạp bổ sung

Nếu một trong những hạn chế này áp dụng cho bạn, bạn có thể xem xét giải pháp JavaScript

Hãy tưởng tượng điều này. khi trang tải, tất cả các video đều được xem và tỷ lệ khung hình của chúng được lưu. Ngay lập tức và bất cứ khi nào cửa sổ được thay đổi kích thước, tất cả các video đều được thay đổi kích thước để lấp đầy chiều rộng có sẵn và duy trì tỷ lệ khung hình của chúng. Sử dụng Thư viện JQuery JavaScript, có dạng như sau

// Find all YouTube videos
// Expand that selector for Vimeo and whatever else
var $allVideos = $["iframe[src^='//www.youtube.com']"],

  // The element that is fluid width
  $fluidEl = $["body"];

// Figure out and save aspect ratio for each video
$allVideos.each[function[] {

  $[this]
    .data['aspectRatio', this.height / this.width]

    // and remove the hard coded width/height
    .removeAttr['height']
    .removeAttr['width'];

}];

// When the window is resized
$[window].resize[function[] {

  var newWidth = $fluidEl.width[];

  // Resize all videos according to their own aspect ratio
  $allVideos.each[function[] {

    var $el = $[this];
    $el
      .width[newWidth]
      .height[newWidth * $el.data['aspectRatio']];

  }];

// Kick off one resize to fix all videos on page load
}].resize[];

Đó là thứ đã trở thành FitVids. js

Ngoại trừ thay vì xử lý tất cả các hoạt động kinh doanh thay đổi quy mô đó, FitVids. js lặp lại trên tất cả các video và thêm trình bao bọc HTML và CSS cần thiết cho phép tỷ lệ khung hình. Đó là cách hiệu quả hơn so với việc phải liên kết với trình xử lý thay đổi kích thước cửa sổ

Làm cách nào để thêm video vào HTML và CSS?

Bạn có thể có một video làm CSS nền không?

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

Làm cách nào để thêm URL video nền trong CSS?