Làm cho tất cả nội dung được nhúng đáp ứng với RDame.js
Phần khó nhất về nhúng video đang nhận được chiều rộng và chiều cao chính xác. Những con số này xác định tỷ lệ khung hình và khi họ tắt bạn sẽ có được một trình phát video hấp dẫn.
Đây là đúng cho tất cả các yếu tố nhúng chẳng hạn như iframe và các vật dụng truyền thông xã hội. Và những điều này thậm chí có thể phức tạp hơn với thiết kế đáp ứng bởi vì chúng thường yếu tố không đáp ứng.
Nhưng vơi Chuyển hướng, bạn có thể làm bất kỳ yếu tố nào đáp ứng cho bất kỳ tỷ lệ khung hình nào.
Đây có lẽ là một trong những plugin JS đơn giản nhất nhưng có giá trị nhất trên web. Nó thực sự là được tạo bởi câu lạc bộ Dollar Shave Điều đáng ngạc nhiên là có trang GitHub của riêng mình.
Chuyển hướng là một trong những plugin miễn phí của họ được xây dựng cho các nhà phát triển muốn có cách đơn giản hơn xử lý nội dung nhúng đáp ứng.
Thủ phạm rõ ràng là video nhúng từ các trang web như YouTube và Vimeo. Nó nổi tiếng khó làm cho các yếu tố này phản ứng không có hack CSS.
Với RDame.js, bạn chỉ cần lựa chọn bất cứ yếu tố nào bạn muốn nhắm mục tiêu và điều chỉnh lại nó sử dụng điều chỉnh lại () chức năng.
Bắt đầu bằng cách thêm plugin RDame.js vào trang web của bạn. Bạn có thể tải về một bản sao từ GitHub và nó chỉ được giảm thiểu 1KB.
Sau đó, bạn chỉ vượt qua chức năng một bộ chọn cho bất cứ yếu tố nào bạn muốn điều chỉnh lại. Tải trang và bùm! Bạn nên thiết lập tất cả.
Ví dụ: giả sử bạn có một vài video được nhúng trên trang web của mình. Bạn có thể thêm lớp .video để nhúng, và sử dụng nó như là bộ chọn. Chuyển hướng tự động thêm một div và lớp xung quanh nó để tạo ra phong cách đáp ứng.
Vậy bạn Mã JavaScript sẽ trông như thế này:
điều chỉnh lại ('. video'); Khá đơn giản phải không?
Mã này nhắm mục tiêu tất cả các yếu tố với lớp .video và làm cho họ phản ứng. Không có hack, không có CSS thêm. Không có gì sai khi sử dụng phương pháp CSS nhưng bạn sẽ cần phải tự bọc tất cả các video được nhúng với lớp học thêm.
Chỉ là giúp bạn tiết kiệm thêm bước đó và mang tất cả thông qua với JavaScript. Đến xem bản demo và tìm một số đoạn mã cơ bản, truy cập trang chủ của RDame.js. Bạn có thể tải về một bản sao của mã trực tiếp từ repo GitHub.
