Dễ dàng nhúng các video đáp ứng với SuperEmbed.js

Web hiện đại là đáp ứng đầy đủ và nhiều nhà thiết kế đang nhận ra điều này mỗi ngày. Nhưng có một thách thức đáng tiếc khi nói đến thiết kế đáp ứng: nội dung nhúng.

Mỗi trang web video từ YouTube đến Vimeo đều có mã nhúng mặc định cố định đến một kích thước nhất định. Điều này có nghĩa là các nhà phát triển cần sử dụng các giải pháp khác để tạo video hoàn toàn đáp ứng.

Tuy nhiên, thay vì sử dụng lớp chứa CSS, bạn có thể sử dụng SuperEmbed.js, một thư viện JavaScript miễn phí cho tạo video phản hồi.

Plugin này giải quyết hai vấn đề một lần. Tất cả các video nhúng sẽ kéo dài để điền vào container chính, trong khi cũng đủ linh hoạt để Thay đổi kích thước dựa trên cửa sổ trình duyệt.

Phần tốt nhất là SuperEmbed.js không yêu cầu thêm mã, vì vậy bạn có thể chỉ nhúng các tập tin và để họ chạy. Thư viện JS này chăm sóc phần còn lại bằng cách nhắm mục tiêu các yếu tố nhúng từ các trang web nhất định.

Tất cả video duy trì tỷ lệ khung hình cụ thể của họ, vì vậy bạn không cần phải lo lắng về kích thước khổng lồ. Và SuperEmbed hoạt động như một thư viện JS vanilla với không phụ thuộc chẳng hạn như jQuery.

Ngay bây giờ, SuperEmbed hỗ trợ hơn 15 video nhúng từ các trang web như YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me và Archive.org (trong số nhiều trang khác). Danh sách này là vẫn đang phát triển, vì vậy, mong đợi nhiều dịch vụ truyền phát video sẽ được thêm vào theo thời gian.

Để công cụ này hoạt động, bạn chỉ cần tải thư viện và thêm nó vào tiêu đề trang web của bạn như vậy

Bạn có thể tải xuống một sao chép đầy đủ từ repo GitHub cũng bao gồm thông số kỹ thuật cho các trang web video được hỗ trợ và hỗ trợ trình duyệt hiện tại.

Đối với hầu hết các phần, SuperEmbed hỗ trợ tất cả các trình duyệt hiện đại từ FireFox 3.5+, Chrome 4+ và các phiên bản Internet Explorer 9 trở lên.

Đây là một thư viện rất ấn tượng khi xem xét tất cả các hỗ trợ trình duyệt và nó tốt như thế nào hoạt động ngay lập tức. Đó là một giải pháp đơn giản hơn nhiều so với các bản hack CSS nếu bạn thấy ổn khi dựa vào JavaScript.

Bạn có thể tìm thêm thông tin trên GitHub và bạn có thể thấy nó chạy trực tiếp trong câu đố này.