搜尋

網頁中嵌入 Facebook 影片

在 Facebook 裡除了分享圖片和文字,也會分享許多的影片,這篇教學會介紹如何透過 HTML 的實作,將 Facebook 裡的公開分享的影片,嵌入到自己的網頁裡。

HTML 教學 - 網頁中嵌入 Facebook 影片

取得 Facebook 影片嵌入程式碼

前往 Facebook 開發者的「內嵌影片和直播視訊播放器」頁面,下拉找到並點擊「取得程式碼」按鈕。

HTML 教學 - 網頁中嵌入 Facebook 影片 - 取得程式碼

開啟程式碼後,分別有 JavaScript SDK 和 iFrame 兩種方式,都可以將影片嵌入到網頁中,如下圖所示,畫紅線的位置要替換成影片的網址 ( iFrame 可替換影片網最後方的數字 ID 代碼 )。

HTML 教學 - 網頁中嵌入 Facebook 影片 - JavaScript SDK

HTML 教學 - 網頁中嵌入 Facebook 影片 - iFrame

取得 Facebook 影片網址

登入網頁版本 Facebook,在貼文處看到影片後,用滑鼠連續點擊該影片,該影片就會放大播放,此時從上方的網址列就可以看到影片的網址 ( 注意如果要嵌入的影片,必須是「公開分享」的影片 )。

HTML 教學 - 網頁中嵌入 Facebook 影片 - 取得 Facebook 影片網址

嵌入 Facebook 影片

如果是使用 JavaScript SDK,將第一段程式碼放在 <body> 的最上方,第二段程式碼放在想要嵌入的位置,替換影片的網址後,網頁中就會嵌入 Facebook 影片。

<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
        src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v15.0"
        nonce="C0b0ZzEi"></script>

<div class="fb-video"
    data-href="https://www.facebook.com/steam.oxxostudio.tw/videos/1200321793708868"
    data-width="500"
    data-show-text="false">
  <blockquote cite="https://www.facebook.com/steam.oxxostudio.tw/videos/1200321793708868" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/steam.oxxostudio.tw/videos/1200321793708868">How to Share With Just Friends</a><p>How to share with just friends.</p>由 <a href="https://www.facebook.com/facebook/">Facebook</a> 發佈於 2014年12月5日 星期五
  </blockquote>
</div>

如果是使用 iFrame,只要將程式碼放在想要嵌入的位置,替換影片的 ID 數字後 ( 置換 videos%2F 和 %2F 中間的數字 ),就會嵌入 Facebook 影片。

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F1200321793708868%2F&width=500&show_text=false&height=280&appId"
  width="500"
  height="280"
  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>

HTML 教學 - 網頁中嵌入 Facebook 影片

嵌入 Facebook 影片屬性設定

嵌入的 Facebook 影片可以透過屬性的設定,修改嵌入時的樣貌,相關屬性設定如下 ( 如果是 iFrame 的方式,需要修改網址,並移除「data-」):

屬性 說明
data-href Facebook 影片的網址。
data-allowfullscreen 允許全螢幕,預設 false。
data-autoplay 載入影片後自動播放,預設 false。
data-width 影片容器寬度。下限為 220px,預設 auto。
data-show-text 出現包含影片貼文的文字,預設 false。
data-lazy 延遲載入,如果尚未瀏覽到該區域則不載入,預設 false。
data-show-captions 電腦桌面版本顯示字幕,預設 false。

以下方的 HTML 搭配 JavaScript SDK 為例,嵌入的影片下方會出現貼文的文字。

<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
        src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v15.0"
        nonce="C0b0ZzEi"></script>

<div class="fb-video"
    data-href="https://www.facebook.com/steam.oxxostudio.tw/videos/1200321793708868"
    data-width="500"
    data-show-text="true">
  <blockquote cite="https://www.facebook.com/steam.oxxostudio.tw/videos/1200321793708868" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/steam.oxxostudio.tw/videos/1200321793708868">How to Share With Just Friends</a><p>How to share with just friends.</p>由 <a href="https://www.facebook.com/facebook/">Facebook</a> 發佈於 2014年12月5日 星期五
  </blockquote>
</div>

如果是使用 iFrame 則是要修改網址,並移除 data-,修改方式如下 ( 注意要設定高度,避免遮住文字 ):

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F1200321793708868%2F&width=500&show_text=true&height=280&appId"
  width="500"
  height="450"
  scrolling="no"
  frameborder="0"
  allowfullscreen="true"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
  allowFullScreen="true">
</iframe>

HTML 教學 - 網頁中嵌入 Facebook 影片

參考資料

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片