如何將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）：
📌 這裡使用了經典的 "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>
🎯 建議流程整理（以利未來操作）：
到 Facebook 貼文找到影片的網址
使用線上工具或 JS encode function 將網址進行
「URL 編碼」工具建議： https://www.urlencoder.org/
將編碼後的網址貼上到 href= 後面（保持其餘結構不變）
嵌入到你的網站或平台
✅ 改良後範本程式碼（可直接複製使用）：
