Nhúng video YouTube để hiển thị Responsive trên WordPress

Hello, xin chào anh em ! Hôm nay Hocban.vn chia sẻ đến anh em một cách để nhúng video Responsive từ YouTube vào bài viết trên webiste trên WordPress.

Nhúng video Responsive là sao ta ?

Nhúng video ( video embed) là việc chúng ta đưa một video từ một nguồn khác host mà website mình đang chạy, để hiển thị lên bài viết hoặc một vị trí nào đó trên website. Chúng thường là các dịch vụ chia sẻ video như: Facebook, Vimeo, DailyMotion,… và phổ biến nhất hiện nay là YouTube.



Các dịch vụ này nó cho chúng ta một đoạn mã nhúng, chỉ cần cốp bi và dán đoạn mã đó vào bài viết hoặc vị trí nào đó trên website (ở chế độ soạn thảo HTML) là được. Đối với WordPress thì chỉ cần dán link YouTube vào là nó tự động hiển thị video chứ không cần copy code làm gì. Tuy nhiên nó nảy sinh một vấn đề là video sẽ không responsive.

Anh em có thể xem ảnh minh họa dưới đây để hình dung được video được nhúng có responsive và không responsive. Chắc chắn rằng không responsive nhìn sẽ rất tệ khi hiển thị trên các thiết bị có màn hình nhỏ như máy tính bảng, điện thoại,..

Hinh dung ve video nhung co responsive tu YouTube

Hình dung về video nhúng có responsive từ YouTube

Cách nhúng video responsive từ YouTube

Cái này hồi trước mình nghịch khá nhiều, tìm đủ mọi cách trên mạng rồi cài cả mớ plugin để test và cuối cùng cũng chọn được plugin ưng ý. Đó là plugin có tên Responsive Video Light, rất nhẹ nhàn và tình cảm. Các bạn tìm tên đó trên Google và chọn kết quả đầu tiên.

Việc cài đặt plugin thì các bạn biết rồi nên mình không nói thêm, sau khi cài thì nhớ kích hoạt nó lên nhé !

Để xài nó thì rất đơn giản, có thể thực hiện theo 02 bước dưới đây:

  • Bước 1: Đầu tiên các bạn mở video cần nhúng trên YouTube, nhìn cái URL của video đó.
https://www.youtube.com/watch?v=7OUl2SOeL44
  • Bước 2: Bạn copy cái đoạn cuối trong đường link sau chữ “v=” (ví dụ ở trên: 7OUl2SOeL44) , rồi dán nó vào trong bài viết sao cho nó ra hình thù kiểu như dưới đây trong bài viết là oke.
      

Bây giờ thì các bạn có thể xem video được nhúng vào bài viết đã responsive chưa nhé ! Haha, khá là dễ làm đúng không ? Thì bài này mình chia sẻ cái thủ thuật nho nhỏ vậy thôi, anh em nào có cách nhúng đơn giản hơn thì cho mình xin góp ý bên dưới nhen ! Còn bạn nào không làm được thì cứ côm mềnh bên dưới, mình trỉ cho !

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đến từ Gia Lai, lai rai hay đi comment dạo 😂

avatar
4 Comment threads
17 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
Nhân vật hư cấuQuang TuyênAi cũng biết là ai rồi đóTịnh NguyễnMéo lưu thông tin à >< lần nào cũng phải nhập Recent comment authors
KhoDemo.Com <span class="wpdiscuz-comment-count">6 bình luận </span>

không nên sử dụng plugin cho những thứ mà 1 dòng css có thể xử lý 🙂

Méo lưu thông tin à >< lần nào cũng phải nhập <span class="wpdiscuz-comment-count">6 bình luận </span>

ông nhảm vãi lái ra, ló chỉ là 1 dòng css google ra là thấy mà, muốn nhanh thì tạo cho nó 1 cái class, xong nhung thì cứ gõ thêm cái class vào là đc
đâu cần rành code, chỉ cần biết cài theme, biết search google là đc

Tịnh Nguyễn <span class="wpdiscuz-comment-count">26 bình luận </span>

Test comment xem có lưu thông tin không. Ở chế độ duyệt khách =>> kết quả là không lưu thông tin.

Tịnh Nguyễn <span class="wpdiscuz-comment-count">26 bình luận </span>

Test comment ở chế độ duyệt thường, thông tin đã nhập được lưu bình thường. Như vậy cho thấy thiết lập trong trình về lưu thông tin của đồng chí có có gì đó chưa đúng /hoặc đã duyệt trong chế độ không lưu thông tin.

Ai cũng biết là ai rồi đó <span class="wpdiscuz-comment-count">6 bình luận </span>

Đã đọc cmt gắt nhất và chủ nhà trúng thưởng gói click ads nâng cao, 1000 click/ngày
Lưu dạng đăng nhập chứ ko phải nhớ điền sẵn của trình duyệt chứ

Ai cũng biết là ai rồi đó <span class="wpdiscuz-comment-count">6 bình luận </span>

Vãi ông, chém gió vui thôi mà nâng quan điểm đến mức tư thù cá nhân thế thì cũng chịu
Thôi chắc ta ko hợp nhau

P/s: trích dẫn hộ vài cmt gây chiến hộ tôi phát

Quang Tuyên <span class="wpdiscuz-comment-count">6 bình luận </span>
Quang Tuyên 6 bình luận

Ông nghĩ thế thì thôi, coi như ae ko hợp nhau, ko nc nữa là đc. Còn kiểu thù hằn gì thì tôi chả có, lâu lâu thấy post thì cmt chém vui, ko thích thì nên nói luôn, giữ tròn lòng như thế nặng lắm.

Stop ở đây và unf cho nhẹ lòng nhé

Nhân vật hư cấu <span class="wpdiscuz-comment-count">2 bình luận </span>
Nhân vật hư cấu 2 bình luận

Tôi không biết ông viết cái gì nhưng đừng động đến Tịnh Nguyễn của chúng tôi OK :)) Ông có giỏi thì hướng dẫn người ta đi ha

Phước Đt <span class="wpdiscuz-comment-count">32 bình luận </span>

Cám ơn bác đã chia sẻ. Em đã xem và đã áp dụng cho blog của mình!

Đào Cáo <span class="wpdiscuz-comment-count">15 bình luận </span>

cảm ơn bác, e đã biết

Thuần Te Tua <span class="wpdiscuz-comment-count">88 bình luận </span>

Anh em lập team làm video về game Youtube đi khà khà 😀

Bùi Công Luận <span class="wpdiscuz-comment-count">24 bình luận </span>

Sai chính tả khúc cuối nhé ! Chỉ vs Trỉ…chỉ là một hành động…còn Trỉ là bệnh trỉ 😀