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.

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 !

guest
13 Comments
Inline Feedbacks
View all comments
Văn phòng công chứng <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">8</span><span style="color: #2196f3;">) </span>
Guest

Cách làm rất đơn giản mà ít người biết đến, cảm ơn bác

Huy <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest
Huy (1)

Chào bạn mình cũng tập làm website .đã mua miền những ko biết sự dụng

Nhân vật hư cấu <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #2196f3;">) </span>
Guest
Nhân vật hư cấu (2)

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 style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">36</span><span style="color: #2196f3;">) </span>
Guest

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

Đào Cáo <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">15</span><span style="color: #2196f3;">) </span>
Guest
Đã trả lời  Phước Đt (36)

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

Thuần Te Tua <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">97</span><span style="color: #2196f3;">) </span>
Guest

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

Bùi Công Luận <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">34</span><span style="color: #2196f3;">) </span>
Guest

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ỉ 😀