Hướng dẫn cách nhúng video Youtube và Facebook vào bài viết trên website

 

Việc nhúng video từ các trang chia sẻ video vào các bài viết trên website là công việc thường làm của các webmaster. Video được nhúng phổ biến nhất là Youtube. Từ khi Facebook cho phép đăng video thì chúng ta có thêm một nguồn cung cấp video khá tốt. Tuy công việc có vẻ đơn giản nhưng với những người mới tìm hiểu về xây dựng và phát triển website thì cần tìm hiểu nhiều thứ và tôi chỉ muốn giúp các bạn học nhanh hơn mà thôi.

Nhúng video Youtube

Lấy ví dụ tôi muốn đăng video của Charlie Puth, bài We don’t talk anymore vào bài viết này.
Đầu tiên, vào trang Youtube.com, tìm kiếm video và mở nó ra. Tôi thường dùng 2 cách này để nhúng video Youtube vào bài viết:
1Copy chính địa chỉ URL trên trình duyệt đang phát video này. Với video này tôi có URL như bên dưới:
https://www.youtube.com/watch?v=3AtDnEC4zak
Dán URL này vào khung đăng bài của website và video sẽ được đăng.
2Nhấp chuột phải vào video, chọn Copy embed code, ta sẽ có đoạn mã nhúng như bên dưới:

chen-video-youtube-1
<iframe width="640" height="360" src="https://www.youtube.com/embed/3AtDnEC4zak" frameborder="0" allowfullscreen></iframe>
Dán đoạn mã này vào khung đăng bài của website.

Ở đây chúng ta lưu ý là, tùy vào mã nguồn của website mà cách dán các mã nhúng có thể khác nhau. Như ở Vntopic.net, chúng ta sẽ có nút chèn Video và bạn sẽ dùng một trong 2 cách trên để lấy mã nhúng và dán vào. Bạn cũng có thể dán trực tiếp URL ở cách 1 vào khung đăng bài là đã nhúng được video.
Kết quả đây:

Nhúng video Facebook

Lấy ví dụ cho một video được đăng trên fanpage của Vntopic. Chúng ta làm như sau:
1Nhấp vào mũi tên xuống ở góc trên, phải của video được đăng trên Facebook. Chọn vào Nhúng.

chen-video-facebook-1
2Trong cửa sổ nhỏ vừa hiện ra, bạn copy đoạn mã nhúng và dán vào website giống như với Youtube video.

chen-video-facebook-2

Đoạn mã sẽ có dạng như sau:

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvntopic.net%2Fvideos%2F1781974478739634%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
Và cũng giống như trên, chèn vào bài viết như thế nào là vấn đề thiết kế của từng website nhé, tôi không thể nói cụ thể được. Sản phẩm đã nhúng đây:

Với tip nho nhỏ trên đây hi vọng sẽ có ích cho bạn. Xin cảm ơn bạn đã xem, và hãy share nếu thấy hay nhé  :lol:


Xem thêm:
loading...
loading...

Like nếu bạn thấy hay, và nhớ chia sẻ cho bạn bè
 
Bình luận với tài khoản Facebook:

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *