展開或縮小文章目錄

Facebook 影片不止可以在 Facebook 網站裡面顯示給受眾，同時你也可以讓影片嵌入在部落格裡面，如果受眾在部落格文章觀看影片的話，這會大幅度地獲得讀者們的注意力，也不會像停留在社交媒體很容易就刷走你的影片

上一篇教學我們知道如何在部落格文章嵌入 YouTube 影片，這次我們一起著手把 Facebook 影片也嵌入到我們的部落格文章，我會分享 2 個影片排版呈現方式，第一是沒有自動調整顯示尺寸，第二是有自動調整顯示尺寸的

影片演示

使用以下按鈕訂閱我們的 YouTube 頻道

#1 獲得 Facebook 影片的嵌入代碼

前往你的 Facebook 粉絲專頁，點擊你想嵌入的影片
你會看到影片的訊息欄有 3 點的按鈕，點擊一次
接著會呈現幾個選項，Copy link ，Embed Code，Delete Video
你需要點擊 Embed 的選項
界面會有彈跳視窗，顯示影片和的代碼
點擊 Copy Code 複製嵌入代碼

#2 粘貼複製代碼到部落格文章

how to embed facebook video ti blogger HTML view

前往部落格文章普通編輯模式，輸入『@@@@』作為嵌入影片的位置記號
轉換成 HTML View 然後找到『@@@@』的記號
使用 Facebook 影片代碼取代記號，然後點擊儲存

使用一般的嵌入代碼方式有一個不好的地方，在嵌入的影片在電腦版本會顯示右手邊有一些閒置的位子，如果轉換到手機版本查看，會發現影片下方距離文字會有一個很大的距離

這樣的排版並不是很理想，至少我認為這樣的排版是不好的，正所謂連我自己都覺得過不了關，怎麼好意思讓讀者或顧客查閱呢

所以你可以使用以下的代碼，讓整個影片能夠影片尺寸紫銅調整

#3 複製自動調整影片尺寸代碼

<style>
.facebook-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.facebook-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
</style>
<div class="facebook-responsive">
   <iframe allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen="true" frameborder="0" height="280" scrolling="no" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fmatoglobal%2Fvideos%2F595310844544014%2F&amp;width=500&amp;show_text=false&amp;height=280&amp;appId" style="border: none; overflow: hidden;" width="500"></iframe>
</div>

注意：紅色的 Code 是我的影片嵌入代碼，你只需要用你的影片嵌入代碼取代便可以獲得 Responsive facebook 呈現了