Kể từ WordPress 3.0+, bạn có thể nhúng video Youtube dễ dàng vào các bài viết của mình chỉ đơn giản bằng cách dán URL của trang video vào trình soạn thảo văn bản của bạn. WordPress sau đó sẽ làm việc phần còn lại và chèn mã yêu cầu để nhúng video vào trang web của bạn. Điều này là tuyệt vời, ngoại trừ chiều rộng và chiều cao của video nhúng được đặt trước và bạn không thể thay đổi nó. Điều có thể xảy ra là video quá nhỏ cho chủ đề của bạn hoặc quá lớn để vừa với nội dung. Nếu bạn đang sử dụng một chủ đề đáp ứng cho trang web của mình, bạn sẽ thấy rằng video không mở rộng quy mô khi bạn đổi kích thước trình duyệt và cuối cùng là phá vỡ chủ đề của bạn.

Để minh họa, đây là những gì đã xảy ra:

Lưu ý rằng video không chiếm toàn bộ chiều rộng của vùng chứa nội dung?

Lưu ý rằng video không mở rộng khi bạn thay đổi kích thước trình duyệt và nó đã đi ra khỏi vùng chứa nội dung và phá vỡ chủ đề?

Để khắc phục điều này, chúng tôi cần sử dụng tập lệnh - FitVids - điều này sẽ biến video được nhúng của bạn thành đối tượng đáp ứng đầy đủ chiều rộng và tự động mở rộng khi bạn thay đổi kích thước trình duyệt.

Cá nhân, tôi đã tích hợp kịch bản FitVids trực tiếp vào chủ đề để giảm chi phí máy chủ, nhưng đối với những người không có kinh nghiệm về mã hóa, có một plugin có thể làm điều đó cho bạn: FitVids cho WordPress.

1. Cài đặt và kích hoạt FitVids cho plugin WordPress.

2. Chuyển đến “Giao diện -> FitVids”.

3. Nếu bạn hoàn toàn chắc chắn rằng kịch bản lệnh jQuery (của phiên bản 1.6 trở lên) đã được bao gồm trong chủ đề của bạn, hãy để trống trường "Thêm jQuery". Nếu không, hãy chọn hộp bên cạnh “Thêm jQuery”.

4. Trường “Bộ chọn jQuery” hơi phức tạp vì nó có thể khác nhau cho mỗi trang. Đối với hầu hết các trường hợp, bạn chỉ cần nhập từ “ body ” (không có dấu ngoặc kép) vào trường nhập và nó sẽ hoạt động. Tuy nhiên, nếu bạn muốn nhắm mục tiêu vi mô một vùng chứa cụ thể bằng video, bạn có thể đặt id / lớp của vùng chứa trong trường này, ví dụ: " #video-container ", " .entry-content ", " .entry-content " v.v.

Lưu ý : "#" và "." Ở phía trước của văn bản đại diện cho "id" và "class" trong CSS tương ứng.

5. Bây giờ, hãy xem bài đăng có video được nhúng. Bạn sẽ thấy một cái gì đó như thế này:

Video hiện chiếm toàn bộ chiều rộng của vùng chứa nội dung

Nó tự động mở rộng quy mô khi bạn thay đổi kích thước trình duyệt.

Phần kết luận

FitVids là một tập lệnh dễ sử dụng để chuyển đổi video được nhúng của bạn thành một đối tượng đáp ứng. Hãy dùng thử và cho chúng tôi biết nếu điều này hữu ích cho bạn.