嵌入 Facebook 影片
在 Facebook 里除了分享图片和文字，也会分享许多的影片，这篇教学会介绍如何透过 HTML 的实作，将 Facebook 里的公开分享的影片，嵌入到自己的网页里。
取得 Facebook 影片嵌入程序码
前往 Facebook 开发者的“内嵌影片和直播视频播放器”页面，下拉找到并点击“取得程序码”按钮。
打开程序码后，分别有 JavaScript SDK 和 iFrame 两种方式，都可以将影片嵌入到网页中，如下图所示，画红线的位置要替换成影片的网址 ( iFrame 可替换影片网最后方的数字 ID 代码 )。
取得 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>
嵌入 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>
参考数据
微信扫码关注
抖音扫码关注