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

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.

responsive_youtube 7OUl2SOeL44

Bây giờ thì 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 !