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 đó.
  • 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 mà khi người ta đối diện với bạn ấy chỉ có thể thốt lên rằng "Ối dồi ôi, đẹp ZAI quá ! " 😂

21 bình luận

  • KhoDemo.Com ( 6 bình luận )

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

    • Hocban.vn ( 2091 bình luận )

      Câu trên chỉ đúng khi nói về người rành code hoặc biết code thôi :v | À mà về vụ responsive YouTube này có đoạn CSS nào để lắp vào ko bác Quang Tuyên :p

    • ô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 ( 25 bình luận )

      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 ( 25 bình luận )

      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.

    • Hocban.vn ( 2091 bình luận )

      À, đồng chí xem lại đã viết gì ở comment đầu tiên nghen, và sau đây tôi cũng trả lời đầy đủ luôn:

      1) Tôi nhảm đoạn nào ?

      2) Chỉ là 1 dòng CSS là ra ??? Google là thấy ??? =>> Nó đâu ? đồng chí làm thử chưa ?

      3) Chỉ cẩn biết cài theme mà làm được cái này đó hả ? =>> Cái này tối thiểu muốn làm thủ công thì phải biết chút HTML và CSS.

      4) “biết search google là đc” =>> Là sao ? Cái này huề vốn quá, khi ông biết từ khóa để tìm, biết lựa chọn kết quả phù hợp với nhu cầu thì nói làm cái gì ?

      5) “Méo lưu thông tin à >< lần nào cũng phải nhập" ==>> Web tôi để mặc định nên lưu thông đã điền bình thường, đó là tính năng của WordPress + Trình duyệt. Tôi có comment minh họa để đồng chí xem rồi nhé ! Mà trong 2 comment ông xài 2 cái địa chỉ IP khác nhau, tôi cũng chả biết là ông xài 2 thiết bị hay gì mà đòi lưu thông tin ?
      ———————————
      Với tư cách chủ nhà tôi đề nghị khi tham gia bình luận trên tinh thần xây dựng hoặc giao lưu, kể cả khi đồng chí đúng hoặc sai thì nó đều được chấp nhận.

      Ngày trước tôi có cái quy định này, nhưng chả có ai vi phạm nên tôi bỏ đi cho nó gọn, đồng chí là người vi phạm đầu tiên ở đây và đây cũng là comment gắt nhất từ trước đến giờ của tôi trên này.

    • Đã đọ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ứ

    • Hocban.vn ( 2091 bình luận )

      Cái chuyện trả thù hay chơi bẩn thì kệ ông thôi, ông chắc thù tôi từ cái thời tôi không duyệt các post SPAM trên nhóm WordPress Cơ Bản, tôi để ý rất nhiều comment cố tình thọc gậy bánh xe và gây chiến tranh rất cao, chẳng qua lờ đi cho êm thôi.

      Đăng nhập để bình luận thì nói làm gì ? Cái đó có phải tài khoản đâu mà đăng nhập.

    • 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

    • Hocban.vn ( 2091 bình luận )

      Ông gọi đó là chém gió, với ngôn từ đó, với tư cách là khách với chủ nhà, ông thấy vui hả ? Tôi đọc comment là biết ngay không phải ai mạo danh để gây war, nó là cái kiểu nói chuyện của ông từ trước đến giờ tôi để ý trên Facebook.

      Trích ngay cái comment ở trên “ông nhảm vãi lái ra” ==> Ông vào nhà người ta nói chuyện, ông phát ngôn những câu như thế này là vui hả ? Còn trích dẫn về ngôn ngữ đã kích trên Facebook thì giờ tôi moi chắc không ra, vì có thành kiến nên ông ko comment trên Facebook hoặc bài đăng trên nhóm của tôi nhiều, chỉ nhớ lai rai có vào thọc cái chơi.

    • 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é

    • Hocban.vn ( 2091 bình luận )

      Oke, tôi chấp nhận cách giải quyết mâu thuẫn của ông, hợp lý. Không thích thì tránh nhau ra, thế thôi. Tôi thấy có mùi được hòa giải ở đây, cảm ơn bác dấu tên đã hòa giải nhé 😀

    • Nhân vật hư cấu ( 1 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

    • Hocban.vn ( 2091 bình luận )

      Vãi cả nhân vật hư cấu :v

  • Phước Đt ( 30 bình luận )

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

  • Thuần Te Tua ( 81 bình luận )

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

  • Bùi Công Luận ( 24 bình luận )

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

    • Hocban.vn ( 2091 bình luận )

      Cám ơn Luận Bùi nhé, đất nước cần những trái tim trân thành như thế này. Ơ cơ mà TRỈ cũng đúng mà nhỉ 😅

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )