如何將FB影片要如何嵌入到部落格？完整教學

何將FB影片要如何嵌入到部落格？完整教學

FB影片網址：https://www.facebook.com/varietyshow22/videos/1293004655793699?locale=zh_TW

推薦流程總結表

步驟  內容
1確定影片為公開
2點選「Embed Video」取得嵌入碼
3在 blog 的 HTML 模式貼上
4插入 Facebook SDK 程式碼（只需一次）
5調整寬度、是否允許全螢幕等設定
6預覽確認影片顯示正常

這是FB影片代碼
 <iframe src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Fvarietyshow22%2Fvideos%2F1293004655793699%2F&show_text=false&width=476&t=0" width="476" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>

這段<iframe> 代碼是 Facebook 自動產生的嵌入影片代碼，適合直接貼到你的部落格或網站中

⚠️ 注意事項

  • 影片必須是「公開」設定，否則嵌入後其他人看不到。

  • 若影片不顯示，請檢查：

    • 貼錯模式（記得一定要在 HTML / 原始碼模式貼）

    • 被瀏覽器封鎖 iframe（瀏覽器安全設定或廣告阻擋插件）

  • 有時 Blogger 或痞客邦會自動移除 iframe，要確認平台允許這類嵌入。

💡 如果你想讓 Facebook 影片也像 YouTube 一樣「響應式」怎麼辦？

你可以用下面這段 HTML + CSS 讓 Facebook 影片支援 寬度自適應（RWD）：

<div style="position:relative; padding-bottom:56.25%; height:0; 
overflow:hidden; max-width:100%; height:auto;">
  <iframe src="https://www.facebook.com/plugins/video.php?
height=476&href=https%3A%2F%2Fwww.facebook.com%2Fvarietyshow22%2
Fvideos%2F1293004655793699%2F&show_text=false&width=476&t=0"
style="position:absolute; top:0; left:0; width:100%; height:100%; 
border:none; overflow:hidden"
scrolling="no" frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; 
picture-in-picture; web-share">
  </iframe>
</div>

📌 這裡使用了經典的 "padding-bottom hack"，達到類似 YouTube 的寬螢幕 RWD 效果。

使用 width="100%" 的情況下，影片播放器 會自動拉寬至整個容器寬度（幾乎貼滿整個內容區塊），這是你之前 YouTube 影片的做法。

最後改良版 Facebook <iframe> 嵌入碼

<div style="max-width: 720px; margin: auto;">

  <iframe 

    src="https://www.facebook.com/plugins/video.php?height=500&href=https%3A%2F%2Fwww.facebook.com%2Fvarietyshow22%2Fvideos%2F1293004655793699%2F&show_text=false&width=500&t=0"

    width="100%" 

    height="600"

    style="border:none;overflow:hidden" 

    scrolling="no" 

    frameborder="0" 

    allowfullscreen="true" 

    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">

  </iframe>

</div>

...................................................................................................................................

「以後每當你拿到一個新的 Facebook 影片網址，要如何套用到這段“最後改良版 Facebook <iframe> 嵌入碼”？」

✅ 目標：

當你拿到新的 Facebook 影片網址，要如何修改這段程式碼？只要改對 1 個地方 + 做 1 次轉換（網址編碼），影片就會正常顯示！

🧰 一、新影片嵌入步驟（超簡版）

步驟 1：拿到 Facebook 影片網址（如你這個）

https://www.facebook.com/61566734004849/videos/2011714052908803

步驟 2：進行 網址編碼（URL Encode）

你可以用這個轉換工具（免費）：
👉 https://www.urlencoder.org/

轉出結果是：

https%3A%2F%2Fwww.facebook.com%2F61566734004849%2Fvideos%2F2011714052908803

步驟 3：貼到「改良版」中的 href=... 位置，把舊網址換掉即可！

🧱 二、完整說明：要修改哪裡？

這是原本的程式碼（用的是某支舊影片）：

<iframe 
  src="https://www.facebook.com/plugins/video.php?height=500&href=https%3A%2F%2Fwww.
facebook.com%2Fvarietyshow22%2Fvideos%2F1293004655793699%2F&show_text=false&width=500&t=0"

你需要修改這一段裡的：

href=https%3A%2F%2Fwww.facebook.com%2Fvarietyshow22%2Fvideos%2F1293004655793699%2F

👉 改成你的新網址（經過 URL 編碼後的）

✅ 三、範例：你剛才的影片正確版本如下：

<div style="max-width: 720px; margin: auto;">
  <iframe 
    src="https://www.facebook.com/plugins/video.php?height=500&href=https%3A%2F%2Fwww.
facebook.com%2F61566734004849%2Fvideos%2F2011714052908803&show_text=false&width=500&t=0"
    width="100%" 
    height="600"
    style="border:none;overflow:hidden" 
    scrolling="no" 
    frameborder="0" 
    allowfullscreen="true" 
    allow="autoplay; clipboard-write; encrypted-media;
 picture-in-picture; web-share">
  </iframe>
</div>

🧠 四、懶人筆記（快速複製用）

要改的東西 怎麼改
href= 裡面的影片網址 ✅ 先用 URL Encode 轉換後再貼上
height=500 ✅ 可調整高度（直式影片建議 600~800）
width=100% ✅ 保持不變，響應式寬度

🧪 延伸小技巧（選擇性）

如果你要... 建議怎麼改
影片是橫式 height=360 ~ height=480 就夠了
影片是直式（Reels/手機拍攝） 建議 height=600 或更高（720）
要在手機也好看 一定保留 width="100%"
不要顯示影片文字說明 show_text=false ✅
要加影片標題（不建議） 改成 show_text=true（但會拉長版面）

🧰 五、懶人模版（你每次只要貼上網址即可）：

<!-- FB 影片嵌入響應式模板 -->
<div style="max-width: 720px; margin: auto;">
  <iframe 
    src="https://www.facebook.com/plugins/video.php?height=600&href=
【這裡貼你編碼後的網址】&show_text=false&width=500&t=0"
    width="100%" 
    height="600"
    style="border:none;overflow:hidden" 
    scrolling="no" 
    frameborder="0" 
    allowfullscreen="true" 
    allow="autoplay; clipboard-write; encrypted-media; 
picture-in-picture; web-share">
  </iframe>
</div>




🎯 建議流程整理（以利未來操作）：
  1. 到 Facebook 貼文找到影片的網址
  2. 使用線上工具或 JS encode function 將網址進行「URL 編碼」工具建議：https://www.urlencoder.org/
  3. 將編碼後的網址貼上到 href= 後面（保持其餘結構不變）
  4. 嵌入到你的網站或平台


✅ 改良後範本程式碼（可直接複製使用）：
<div style="max-width: 720px; margin: auto;">
  <iframe 
    src="https://www.facebook.com/plugins/video.php?height=500&href=
【請貼上編碼後的FB影片網址】&show_text=false&width=500&t=0"
    width="100%" 
    height="600"
    style="border:none;overflow:hidden" 
    scrolling="no" 
    frameborder="0" 
    allowfullscreen="true" 
    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
  </iframe>
</div>
-
標籤： , , ,

沒有留言:

發佈留言

訂閱： 發佈留言 (Atom)