• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Chèn video YouTube responsive vào website WordPress

Chèn video YouTube responsive vào website WordPress

27/10/2020 27/10/2020 Trung Hiếu 6 Bình luận

Mục lục bài viết

  1. Tại sao video YouTube không responsive?
  2. Chèn video YouTube responsive vào WordPress
    1. Sử dụng module Shortcode Embeds của Jetpack
    2. Sử dụng plugin Simple YouTube Responsive

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

chen-video-youtube-responsive-vao-website-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 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 2 phương pháp đơn giản nhất.

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.

kich-hoat-tinh-nang-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.

kich-hoat-module-shortcode-embeds-cua-plugin-jetpack

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).

cai-dat-va-kich-hoat-plugin-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.

thiet-lap-plugin-simple-youtube-responsive

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 [you tube v="XXXXXX"] (sửa you tube thành youtube nhé – chỗ này nếu tôi viết liền thì shortcode không hiển thị trên bài viết được nên mong các bạn thông cảm) 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à [you tube v="xlZfVAApS50"] (sửa you tube thành youtube).

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 subscribe 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é. :)

4.3 / 5 ( 6 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: YouTube

dich-vu-cai-dat-website-wordpress-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Tính năng Automatic Platform Optimization của CloudFlare
Bài viết sau Cải tiến công cụ tìm kiếm mặc định của WordPress »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Dang Vo viết

    31/10/2020 lúc 20:51

    Cách nào sử dụng cũng ok. Thanks

    Trả lời
  2. Gia Ngân viết

    03/11/2020 lúc 15:56

    Hướng dẫn cụ thể, tôi đã làm được, cảm ơn ad nhiều.

    Trả lời
  3. Hội Trader viết

    04/11/2020 lúc 14:45

    ĐM. Cái vụ responsive video này là làm mình đau đầu nhất đây. Thanks bài viết của WPCB nhá!

    Trả lời
  4. Huynh My viết

    07/11/2020 lúc 16:05

    Hay quá, cảm ơn anh đã chia sẻ, bình thường em chỉ biết copy link và bỏ vào web thôi. Có bị tràn cũng ko biết làm sao

    Trả lời
  5. Vin viết

    10/11/2020 lúc 21:56

    Em đang tìm cái này thì rất vui được anh chia sẻ, em đã áp dụng thành công. Cảm ơn anh nhé.

    Trả lời
  6. Vietnamese gardener viết

    19/11/2020 lúc 11:05

    Cám ơn. Kiếm tiền online thật khó :)

    Trả lời

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Hướng dẫn sử dụng LiteSpeed Memcached 17/01/2021
  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021
  • Hướng dẫn nâng cấp PHP 8 cho website WordPress 15/12/2020
  • Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo 11/11/2020
  • Hiển thị mô tả cho category và tag trong WordPress 05/11/2020
  • Cải tiến công cụ tìm kiếm mặc định của WordPress 31/10/2020

Dịch vụ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Kdn Auto Leech trong Khắc phục website bị Facebook chặn link
  • Thành trong Tối ưu database WordPress với plugin LiteSpeed Cache
  • Trung Hiếu trong Tối ưu database WordPress với plugin LiteSpeed Cache
  • Thành trong Tối ưu database WordPress với plugin LiteSpeed Cache

Bình luận nhiều nhất (tháng)

  1. Tuyen (7)
  2. Doligo (4)
  3. Nguyễn Văn Long (3)
  4. Tien Coin (3)
  5. Gia Tuấn (2)
  6. Minh (2)

Thông tin hữu ích

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

10 Chuyên mục - 978 Bài viết - 37183 Bình luận

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting