Nhúng video Facebook responsive vào website

Chào các bạn, hôm trước mình có bài hướng dẫn nhúng video Facebook vào website, tuy nhiên vẫn chưa thỏa mãn được yêu cầu của một số bạn. Tính năng responsive đúng là rất quan trọng, do vậy hôm nay mình xin hướng dẫn cách nhúng video Facebook responsive vào website một cách dễ dàng nhất.
Xem code nhúng video Facebook vào web

Nhúng video Facebook responsive vào website

Ok, đầu tiên bạn cần thêm đoạn code này vào trong phần Header của trang

.video-container { position: relative;} .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Sau đó cứ mỗi lần bạn nhúng video Facebook vào website thì bạn sử dụng đoạn code này

<div class="video-container">
Chèn code nhúng video vào đây
</div>

Nó sẽ có dạng như thế này

<div class="video-container">
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/945992622124637/" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook/videos/945992622124637/"><a href="https://www.facebook.com/facebook/videos/945992622124637/">How to Share With Just Friends</a><p>How to share with just friends.</p>Posted by <a href="https://www.facebook.com/facebook">Facebook</a> on 5 Tháng 12 2014</blockquote></div></div>
</div>

Như vậy là xong. Bạn có thể test thử. Còn dưới đây là ví dụ của mình

How to Share With Just Friends
How to share with just friends.
Posted by Facebook on 5 Tháng 12 2014

Nhúng video Facebook vào web

Bạn thấy một video hay trên Facebook và bạn muốn nhúng nó vào website của bạn (Blogspot, Wordpress,...) Bạn chưa biết phải nhúng vào như thế nào? Đây là một tip nhỏ giúp bạn có thể nhúng một video bất kỳ từ Facebook lên trên web.

Rất đơn giản bạn chỉ cần làm theo các bước như sau
B1: Click vào phần option của video

Nhúng video Facebook vào web

B2: Chọn phần nhúng video

Nhúng video Facebook vào web

B3: Copy đoạn code mà Facebook sinh ra cho bạn và nhúng vào website thôi

Nhúng video Facebook vào web

Đoạn code mà Facebook sẽ có dạng như thế này

<div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/video.php?v=945992622124637" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/video.php?v=945992622124637"><p>This time it&#x2019;s personal. Watch the official trailer for The Transporter Refueled now!</p>Posted by <a href="https://www.facebook.com/TheTransporterMovie">The Transporter</a> on&nbsp;<a href="https://www.facebook.com/video.php?v=945992622124637">2 Tháng 7 2015</a></blockquote></div></div>

Bạn có thể sửa các thông số nếu muốn, phần đánh dấu đỏ là id của video, bạn có thể thay bằng id khác. Và đây là ví dụ mà mình nhúng thử sẽ như thế này. Chúc các bạn thành công
Update:
Nhúng video Facebook responsive vào website

This time it’s personal. Watch the official trailer for The Transporter Refueled now!
Posted by The Transporter on 2 Tháng 7 2015

Trong trường hợp bạn chỉ muốn hiển thị video mà không muốn nhúng cả phần fanpage như trên thì có thể dùng đoạn code sau

<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/945992622124637/" data-width="100%"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook/videos/945992622124637/"><a href="https://www.facebook.com/facebook/videos/945992622124637/">How to Share With Just Friends</a><p>How to share with just friends.</p>Posted by <a href="https://www.facebook.com/facebook">Facebook</a> on 5 Tháng 12 2014</blockquote></div></div>

Nó sẽ hiển thị như sau

How to Share With Just Friends
How to share with just friends.
Posted by Facebook on 5 Tháng 12 2014