Tôi đã tìm thấy một cách để làm điều này bằng CSS, nhưng bạn phải cẩn thận vì nó có thể thay đổi tùy thuộc vào dòng chảy của trang web của riêng bạn. Tôi đã thực hiện nó để nhúng video với tỷ lệ khung hình không đổi trong một phần chiều rộng của trang web của tôi.
Giả sử bạn có một video nhúng như thế này:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
Sau đó, bạn có thể đặt tất cả những thứ này vào trong một div với lớp "video". Lớp video này có thể sẽ là yếu tố trôi chảy trong trang web của bạn, do đó, bản thân nó không có ràng buộc về chiều cao trực tiếp, nhưng khi bạn thay đổi kích thước trình duyệt, nó sẽ thay đổi theo chiều rộng theo dòng chảy của trang web. Đây sẽ là yếu tố mà bạn có thể đang cố gắng đưa video nhúng của mình vào trong khi duy trì tỷ lệ khung hình nhất định của video.
Để thực hiện việc này, tôi đặt một hình ảnh trước đối tượng được nhúng trong div lớp "video".
!!! Phần quan trọng là hình ảnh có tỷ lệ khung hình chính xác mà bạn muốn duy trì. Ngoài ra, hãy đảm bảo kích thước của hình ảnh là HẤP DẪN lớn nhất nhỏ nhất bạn mong đợi video (hoặc bất cứ điều gì bạn đang duy trì AR của) để có được dựa trên bố cục của bạn. Điều này sẽ tránh mọi vấn đề tiềm ẩn trong độ phân giải của hình ảnh khi nó được thay đổi tỷ lệ phần trăm. Ví dụ: nếu bạn muốn duy trì tỷ lệ khung hình 3: 2, đừng chỉ sử dụng hình ảnh 3px x 2px. Nó có thể hoạt động trong một số trường hợp, nhưng tôi đã không thử nó, và có lẽ đó là một ý tưởng tốt để tránh.
Bạn có thể đã có chiều rộng tối thiểu như thế này được xác định cho các yếu tố trôi chảy của trang web của bạn. Nếu không, đó là một ý tưởng tốt để làm như vậy để tránh cắt các phần tử hoặc có sự chồng chéo khi cửa sổ trình duyệt quá nhỏ. Nó là tốt hơn để có một thanh cuộn tại một số điểm. Chiều rộng nhỏ nhất mà một trang web sẽ nhận được là khoảng ~ 600px (bao gồm mọi cột có chiều rộng cố định) vì độ phân giải màn hình không nhỏ hơn trừ khi bạn đang xử lý các trang web thân thiện với điện thoại. !!!
Tôi sử dụng một png hoàn toàn trong suốt nhưng tôi thực sự không nghĩ nó sẽ trở nên quan trọng nếu bạn làm đúng. Như thế này:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
Bây giờ bạn sẽ có thể thêm CSS tương tự như sau:
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }
Hãy chắc chắn rằng bạn cũng xóa mọi khai báo chiều cao hoặc chiều rộng rõ ràng trong đối tượng và các thẻ nhúng thường đi kèm với mã nhúng sao chép / dán.
Cách thức hoạt động tùy thuộc vào thuộc tính vị trí của thành phần lớp video và mục bạn muốn duy trì tỷ lệ khung hình nhất định. Nó lợi dụng cách hình ảnh sẽ duy trì tỷ lệ khung hình phù hợp khi được thay đổi kích thước trong một thành phần. Nó nói bất cứ điều gì khác trong phần tử lớp video để tận dụng tối đa lợi thế của bất động sản được cung cấp bởi hình ảnh động bằng cách buộc chiều rộng / chiều cao của nó thành 100% yếu tố lớp video được điều chỉnh bởi hình ảnh.
Khá tuyệt, nhỉ?
Bạn có thể phải chơi xung quanh với nó một chút để làm cho nó hoạt động với thiết kế của riêng bạn, nhưng điều này thực sự hoạt động tốt đáng ngạc nhiên đối với tôi. Khái niệm chung là có.