---
title: "Chèn video YouTube responsive vào website WordPress"
author: "Trung Hiếu"
date: "2020-10-27"
lastmod: "2024-07-14"
url: "https://wpcanban.com/wordpress/thu-thuat-wordpress/chen-video-youtube-responsive-vao-wordpress.html"
---
# 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](https://wpcanban.com/category/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](https://wpcanban.com/wordpress/thu-thuat-wordpress/chen-nut-subscribe-kenh-youtube-vao-wordpress.html)
- [17 Video plugin tốt nhất dành cho blog WordPress](https://wpcanban.com/wordpress/wordpress-plugins/17-video-plugins-tot-nhat-cho-blog-wordpress.html)
## 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](https://wpcanban.com/wordpress/thu-thuat-wordpress/trinh-soan-thao-co-dien-cho-wordpress.html). 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à:
```
```
Hãy sửa nó thành:
```
```
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](https://wpcanban.com/mua-paradise-child-theme) do [WP Căn bản](https://wpcanban.com) bản phát triển và:
#### Sử dụng Classic Editor
Phương pháp này có thể gây ảnh hưởng đến khả năng hiển thị của một số loại video khác, ví dụ như video nhúng từ Tiktok. Do đó chúng tôi khuyên bạn nên cân nhắc sử dụng phương pháp [chỉnh sửa code iframe của YouTube](https://wpcanban.com/wordpress/thu-thuat-wordpress/chen-video-youtube-responsive-vao-wordpress.html#chinh-sua-code-iframe-cua-youtube) nếu website của bạn nhúng video từ nhiều nguồn khác nhau.
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ẻ:
```
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)
Đố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](https://wordpress.org/plugins/simple-youtube-responsive/)).
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.* :)