Plugin video wordpress

Bạn đã bao giờ gặp phải tình trạng video bị che khuất một phần hoặc tràn ra khỏi màn hình khi nhúng video từ YouTube vào trang web WordPress chưa? . Chỉ với một thủ thuật nhỏ, video nhúng từ YouTube sẽ trở nên đáp ứng 100% [đáp ứng], hiển thị tốt trên mọi kích thước màn hình, từ máy tính đến điện thoại di động

Tham khảo thêm

• Chèn nút đăng ký kênh YouTube vào website WordPress
• 17 Plugin video tốt nhất dành cho blog WordPress

Tại sao video YouTube không phản hồi?

• Theme của bạn không hỗ trợ responsive cho video
• Bạn nhúng video bằng mã iframe với chiều dài, chiều rộng được định sẵn
• Bạn đang sử dụng WordPress với phiên bản quá cũ, không hỗ trợ oEmbed hoặc tính năng này đã bị vô hiệu hóa
• Bạn đang sử dụng Classic Editor. Gutenberg hay Block Editor đã được trang sẵn có Embed Blocks, video responsive hỗ trợ

Chèn video YouTube responsive vào WordPress

Có rất nhiều phương pháp khác nhau để giải quyết tình trạng này. Sau đây, tôi sẽ giới thiệu cho các bạn một vài phương pháp đơn giản nhất

Đối chiếu với theme Paradise của WP Căn bản

Nếu bạn đang sử dụng chủ đề con Paradise, hãy thực hiện WP Căn bản phát triển và

Use Classic Editor

1. Vui lòng chèn đoạn CSS sau đây vào trong Giao diện => Tùy chỉnh => CSS bổ sung => nhấp vào nút Xuất bản

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

2. Khi chèn video từ YouTube, các bạn sao chép mã nhúng [iframe] và cho nó vào trong thẻ

code-iframe-youtube

Ví dụ

Nhớ chèn code ở chế độ Text [Văn bản] trong khung soạn thảo nhé

Sử dụng Block Editor [Gutenberg]

Vui lòng chèn đoạn CSS sau đây vào trong Giao diện => Tùy chỉnh => CSS bổ sung => nhấp vào nút Xuất bản

.wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Sau đó, các bạn có thể sử dụng chặn YouTube Embed để chèn như bình thường

Sử dụng module Shortcode Embeds của Jetpack

Nếu bạn đang sử dụng plugin Jetpack trên trang web của mình thì tất cả những gì bạn cần làm là truy cập Jetpack => Cài đặt => Viết và kích hoạt tính năng Soạn sử dụng mã ngắn để nhúng phương tiện từ các trang web phổ biến

Hoặc các bạn cũng có thể truy cập trang quản lý module của Jetpack [nằm ở đường dẫn /wp-admin/admin.php?page=jetpack_modules] và kích hoạt module Shortcode Embeds up

Việc còn lại là sao chép liên kết video YouTube và chèn vào nơi bạn muốn hiển thị

Sử dụng plugin Simple YouTube Responsive

1. Đầu tiên, các bạn cần cài đặt và kích hoạt plugin Simple YouTube Responsive [tải xuống]

2. Truy cập YT Responsive => Cấu hình. Tại đây, các bạn sẽ thấy một số thiết lập như sau

in which

• Tỷ lệ khung hình video. rate of display of video
• Chiều rộng tối đa. chiều rộng tối đa của video
• Các lớp học bổ sung. CSS biến bổ sung. Nếu bạn không có yêu cầu, thì nên bỏ trống theo mặc định
• Trung tâm căn chỉnh tự động. tự động căn giữa cho video
• Tự chạy. video play auto. Tính năng này sẽ bị tắt khi bạn thiết lập lazy load video
• Vòng lặp video. tự động phát lại video nhiều lần
• Cho phép toàn màn hình. allow play video full màn hình
• tải chậm. kích hoạt tính năng lazy load video, nghĩa là chỉ tải video khi người dùng cuộn trang đến. Các bạn nên kích hoạt tính năng này để web load nhanh hơn
• Kích thước thu nhỏ. select size ảnh thumbnail cho video

Sau khi thiết lập xong, nhấp vào nút Save Changes để lưu lại

3. Bây giờ, hãy truy cập vào trình soạn thảo văn bản của bạn. Tạo 1 mã ngắn có cấu trúc

[youtube v="XXXXXX"]

với

code-iframe-youtube

Ví dụ liên kết của video là

//www.youtube.com/watch?v=xlZfVAApS50

hoặc

//youtu.be/xlZfVAApS50

thì

code-iframe-youtube

Mã ngắn mà bạn cần chèn là

Ngoài ra, các bạn còn có thể chèn mã ngắn này vào bất cứ đâu [không hạn chế như trong tiện ích] miễn phí là nơi có hỗ trợ mã ngắn

Đơn giản thật phải không nào?

Bạn có gặp phải lỗi responsive khi chèn video YouTube vào website WordPress không?

Nếu bạn thích bài viết này, hãy đăng ký blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. . ]