Chèn video YouTube responsive vào website WordPress

Hướng dẫn chèn video YouTube responsive vào website WordPress một cách đơn giản.

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 website WordPress chưa? Nếu bạn đang đi tìm giải pháp cho câu hỏi tương tự như vậy thì bài viết này là dành cho bạn. Chỉ với một thủ thuật nhỏ, video nhúng từ YouTube sẽ trở nên đáp ứng 100% (responsive), hiển thị tốt trên mọi kích thước màn hình, từ máy tính tới điện thoại di động.

Tham khảo thêm:

• Chèn nút subscribe kênh YouTube vào website WordPress
• 17 Video plugin tốt nhất dành cho blog WordPress

Tại sao video YouTube không responsive?

• Theme của bạn không hỗ trợ responsive cho video.
• Bạn nhúng video bằng mã iframe với kích thước chiều dài, chiều rộng được quy đị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 bị sẵn Embed Blocks, hỗ trợ responsive video.

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.

Chỉnh sửa code iframe của YouTube

Đây là phương pháp tối ưu nhất và được chúng tôi khuyên dùng trong mọi trường hợp. Các bạn chỉ cần chỉnh sửa giá trị width trong code iframe của YouTube thành 100% là được.

Ví dụ bạn có một code iframe của video YouTube là:

<iframe width="560" height="315" src="https://www.youtube.com/embed/G9kmrZyCWiE?si=wkVRYIR31Ys3VLlT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Hãy sửa nó thành:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/G9kmrZyCWiE?si=wkVRYIR31Ys3VLlT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Các bạn có thể để nguyên giá trị height hoặc sửa nó thành một giá trị hợp lý hơn, chẳng hạn như 500, tương ứng với 500px.

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

Nếu bạn đang sử dụng Paradise child theme do WP Căn bản bản phát triển và:

Sử dụng Classic Editor

1. Hãy chèn đoạn CSS sau đây vào trong Appearance (Giao diện) => Customize (Tùy biến) => Additional CSS (CSS bổ sung) => click nút Publish.

.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 copy code nhúng (iframe) và cho nó vào trong thẻ:

<div class="video-wrapper">code-iframe-youtube</div>

Ví dụ:

<div class="video-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/uD3SFoNCW2A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

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

Sử dụng Block Editor (Gutenberg)

Đối với phiên bản 6.1 hoặc mới hơn: hãy truy cập Giao diện => Tùy biến => Thiết lập giao diện => Tối ưu trải nghiệm => chuyển mục Hỗ trợ Block Editor sang trạng thái Có rồi lưu lại.

Đối với phiên bản 6.0.4 hoặc cũ hơn: hãy chèn đoạn CSS sau đây vào trong Appearance => Customize => Additional CSS => click nút Publish.

.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 block YouTube Embed để chèn như bình thường. Nếu gặp lỗi trong quá trình nhúng video, đừng quên kiểm tra xem tính năng Vô hiệu hóa WP Embed Script trong Giao diện => Tùy biến => Thiết lập giao diện => Tối ưu tốc độ đã được thiết lập ở trạng thái Không hay chưa?

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

Nếu bạn đang sử dụng plugin Jetpack trên website của mình thì tất cả những gì bạn cần làm là truy cập Jetpack => Settings => Writing và kích hoạt tính năng Compose using shortcodes to embed media from popular sites.

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 lên.

Việc còn lại là copy link video YouTube và chèn vào nơi mà bạn muốn hiển thị.

Sử dụng plugin Simple YouTube Responsive

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin Simple YouTube Responsive (download).

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

Trong đó:

• Video aspect ratios: tỉ lệ hiển thị của video.
• Maximum Width: chiều rộng tối đa của video.
• Additional Classes: bổ sung CSS tùy biến. Nếu bạn không có nhu cầu thì nên bỏ trống theo mặc định.
• Auto Align Center: tự động căn lề giữa cho video.
• Autoplay: tự động phát video. Tính năng này sẽ bị tắt khi bạn thiết lập lazy load video.
• Loop video: tự động phát lại video nhiều lần.
• Allow fullscreen: cho phép phát video toàn màn hình.
• Lazy Loading: 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.
• Thumbnail Size: chọn kích thước ảnh thumbnail cho video.

Sau khi thiết lập xong, click 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 shortcode có cấu trúc

[youtube v="XXXXXX"]

với XXXXXX là ID của video và chèn nó vào vị trí bạn muốn hiển thị.

Ví dụ link của video là:

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

hoặc

https://youtu.be/xlZfVAApS50

thì xlZfVAApS50 là ID mà bạn sẽ cần lấy.

Shortcode mà bạn cần chèn là:

[youtube v="xlZfVAApS50"]

Ngoài ra, các bạn còn có thể chèn shortcode này vào bất cứ đâu (chẳng hạn như trong widget) miễn là nơi đó có hỗ trợ shortcode.

Thật đơn giản phải không nào? Nếu bạn muốn sử dụng các shortcode với mức độ tùy biến cao hơn, hãy tham khảo chúng trong YT Responsive => Shortcode.

Bạn có đang gặp phải lỗi responsive khi chèn video YouTube vào website WordPress không? Bạn đã làm cách nào để khắc phục nó? Hãy chia sẻ với chúng tôi kinh nghiệm của bạn thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi 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 nhé. Cảm ơn rất nhiều. :)