Cách nhúng video YouTube để hiển thị Responsive trên WordPress

Bạn muốn nhúng video YouTube để hiển thị Responsive nhưng không biết phải làm cách nào, tuy đây là một thủ thuật nhỏ nhưng bạn cũng vẫn tìm hiểu kĩ trước khi thực hiện. Cùng Enweb xem bài viết dưới đây về cách nhúng video YouTube để hiển thị Responsive trên WordPress trước khi bắt đầu thực hiện bạn nhé!

Responsive là gì?

Trước khi tìm hiểu về nhúng video YouTube để hiển thị Responsive, bạn cần phải biết về Responsive là gì? Responsive sẽ không quá xa lại với những bạn học SEO website, đây là hình thức thiết kế website phù hợp với tất cả các thiết bị hay là mọi độ phân giải màn hình. Là xu hướng thiết kế website hot nhất hiện nay, đây cũng là một trong những yếu tố giúp website của bạn nhanh lên top google và thân thiện hơn trong mắt người dùng tìm kiếm.

Nhung video Youtube de hien thi Responsive
Responsive là gì?

Nhúng video Responsive được hiểu như thế nào?

Việc nhúng video là việc đưa một video từ một nguồn khác với hosting mà website đang chạy để đưa lên hiển thị trên vị trí vào đó của website. Đây thường là những dịch vụ chia sẻ như là Facebook, Vimeo, DailyMotion,…và hiện đang phổ biến nhất đó là Youtube.

Thường những dịch vụ này sẽ cho bạn một đoạn mã nhúng, bạn chỉ cần copy và dán đoạn mã đó vào bài viết hoặc là một vị trí nào đó trên website (Để ở chế độ soạn thảo văn bản HTML). Còn đối với Worpress chỉ cần bạn dán link Youtube vào là nó sẽ tự động hiển thị video mà không cần bạn phải copy code.

Tuy nhiên video của bạn sẽ không Responsive. Hãy xem hình ảnh minh họa bên dưới để phân biệt được video được nhúng có Responsive và không có Responsive sẽ khác nhau như thế nào.

Xem thêm: Hướng dẫn cài đặt và sử dụng plugin Advanced Custom Field Pro

Nhung video Youtube de hien thi Responsive
Nhúng video YouTube để hiển thị Responsive

Sau khi bạn đã hiểu về Responsive và phân biệt được video có nhúng Responsive và video không nhúng Responsive. Tiếp đến chúng ta sẽ đi đến phần cách nhúng video YouTube để hiển thị Responsive.

Cách nhúng video YouTube để hiển thị Responsive trên WordPress

Dưới đây, Enweb sẽ hướng dẫn cho bạn 2 cách để nhúng video YouTube để hiển thị Responsive, cùng xem nhé!

Nhúng video YouTube bằng plugin Responsive Video Light

Nhúng video YouTube để hiển thị Responsive trên WordPress bằng plugin Responsive Video Light, rất đơn giản và thực hiện rất dễ dàng. Responsive Video Light là một plugin cho phép bạn nhúng video Youtube vào Website WordPress rất nhẹ chỉ có 30KB.

Nhung video Youtube de hien thi Responsive
Nhúng video YouTube để hiển thị Responsive bằng Responsive Video Light

Để nhúng video YouTube để hiển thị Responsive trên WordPress, bạn cần phải thực hiện các bước sau đây:

  • Bước 1: Đầu tiên bạn vào plugin cài mới và sau đó nhập vào ô tìm kiếm “Responsive Video Light”.
  • Bước 2: Sau khi đã ra kết quả tìm kiếm, bạn cài đặt và kích hoạt  plugin Responsive Video Light như bình thường.
  • Bước 3: Tiếp theo bạn mở video mà bạn cần nhúng trên Youtube và bạn nhìn URL của video đó.
  • Bước 4: Và bạn copy đoạn cuối của đường link sau chữ “v” trở về sau, sau đó bạn dán nó vào trong bài viết sao cho nó ra được hình thù giống như hình ảnh bên dưới là được. Lưu ý: Khi nhúng bạn phải dán đoạn copy nay dưới định dạng text mới được nha, nếu được bạn nên copy ra notepad rồi sau đó mới dán vào bài viết.

Như vậy là đã xong cách nhúng video YouTube để hiển thị Responsive trên WordPress, bạn chỉ cần ra ngoài xem thành quả. Kết quả sẽ giống như hình bên dưới.

Xem thêm: Hướng dẫn cài đặt và sử dụng plugin WP Rocket

Nhung video Youtube de hien thi Responsive
Nhúng video YouTube để hiển thị Responsive

Nhúng video YouTube bằng plugin Shortcodes Ultimate

Ngoài cách nhúng video YouTube bằng plugin Responsive Video Light, bạn vẫn có thể nhúng video YouTube bằng plugin Shortcodes Ultimate, đây cũng là cách nhúng video YouTube để hiển thị Responsive. Shortcodes Ultimate là một plugin Shortcodes rất được phổ biến với người dùng trên WordPress.

Đây là plugin giúp nhúng addon vào bài viết, trang, widget hoặc là một vị trí bất kỳ nào đó bằng shortcode rất đơn giản và còn tiện lợi. Youtube là một trong những addon được hỗ trợ shortcode để nhúng video. Tuy nhiên kích thước của plugin “Shortcodes Ultimate” lên đến hơn 1.800KB (1,8MB), cao gấp 60 lần so với plugin “Responsive Video Light” (30KB) mà Enweb đã hướng dẫn ở trên.

Nhung video Youtube de hien thi Responsive
Nhúng video YouTube để hiển thị Responsive bằng Shortcodes Ultimate

Nếu như bạn không có sử dụng nhiều tính năng của Shortcodes Ultimate, bạn nên dùng Responsive Video Light sẽ nhẹ hơn nhiều nhé. Vậy để nhúng video YouTube bằng plugin Shortcodes Ultimate cần phải cài đặt và kích hoạt plugin Shortcodes Ultimate. Sau khi đã kích hoạt xong bạn sẽ có 2 cách để thực hiện như sau:

Cách 1: Cách này bạn sẽ sử dụng cấu trúc shortcode ở bên dưới để nhúng video YouTube vào bài viết mà bạn muốn. Để có thể thay đổi video cần nhúng chỉ cần bạn thay bằng link video khác là được.

Cách 2: Ở cách này, để nhúng video bạn cần thực hiện các bước sau đây:

  • Bước 1: Trong soạn của WordPress, bạn chỉ cần trỏ chuột vào vị trí mà bạn muốn nhúng video Youtube, sau đó click chọn Insert shortcode như bên dưới.

Xem thêm: Hướng dẫn cài đặt và sử dụng Plugin All in One WP Migration

Nhung video Youtube de hien thi Responsive
Nhúng video YouTube bằng Shortcodes Ultimate
  • Bước 2: Sau đó, bạn click chọn vào thanh addon Youtube.
  • Bước 3: Tiếp theo, bạn sẽ tùy chọn video cần nhúng.Có khá nhiều tùy chọn nên bên dưới có chú thích rõ hơn về những tùy chọn

Sau khi đã thực hiện xong các bước trên, bạn hãy click cập nhật để xem kết quả sau khi chỉnh. Dưới đây sẽ là một số tùy chọn bạn cần nhớ:

  • URL: Là mục để bạn nhúng link video YouTube cần nhúng vào.
  • Width: Là mục để chỉnh sửa độ rộng hiển thị của video.
  • Height: Là chiều cao hiển thị của video .
  • Autoplay: Là mục để chọn cho video tự phát hay không, nếu bạn muốn tự phát thì nhấp vào chữ “No” để nó chuyển sang chữ “Yes”.
  • Mute: Là mục để bạn tắt tiếng cho video, nếu có thì nhấn vào chữ “No” để chuyển sang “Yes”.
  • Title: Là mục tiêu đề của video.
  • Extra CSS Class: Là mục để thêm CSS tùy chỉnh, cái này nếu bạn biết về CSS hãy dùng.
  • Live preview: Là mục để xem thử kết quả.
  • Insert shortcode: Là mục để áp dụng chèn shortcode.

Xem thêm: Hướng dẫn cài đặt và sử dụng Peffmatters

Nhung video Youtube de hien thi Responsive
plugin Shortcodes Ultimate

Lời kết

Như vậy, bài hướng dẫn cách nhúng video YouTube để hiển thị Responsive trên WordPress đã được Enweb hướng dẫn chi tiết ở các mục bên trên. Hy vọng bài viết sẽ giúp bạn dễ dàng hơn trong việc thực hiện nhúng video YouTube để hiển thị Responsive, hãy theo dõi chúng tôi để biết thêm nhiều nội dung hay hơn nhé!

Bài viết liên quan