Lightbox facebook iframe，视频嵌入

Question

我一直在尝试通过 Magnific Popup（灯箱）加载 facebook 视频嵌入 iframe。以前我使用的是 PrettyPhoto，但我想进行切换。奇怪的是，使用我在以下代码笔中使用的相同方法，iframe 无法为 Facebook 正确加载（例如，在播放器的范围内）。我意识到 PrettyPhoto 也发生了同样的事情，我相信 Facebook 可能做出了改变。

<a class="video" href="http://www.facebook.com/video/embed/?_rdr=p&video_id=1291445700871053">Open Facebook video here</a>

JS

$('.video').magnificPopup({
  type: 'iframe'
});

有谁知道如何缓解这个问题？

http://codepen.io/afagard/pen/YWyoOP

Answer 1

Facebook 似乎更改了他们为 embed_html 版本的视频播放器创建的 HTML。

您可以使用这个 link 来完成这项工作：

https://www.facebook.com/v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3D{VIDEO_ID}

（您应该将 link 末尾的 {VIDEO_ID} 更改为您的视频 ID）。

您的完整代码应如下所示：

<!doctype html>
    <html lang="en">
    <head>
        <title>Video Test</title>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css" />
    </head>
    <body>
        <a class="video" href="https://www.facebook.com/v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3D1291445700871053
">Open Facebook video here</a>
        <br><br><br>
        <a class="video" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Open Youtube video here</a>
        <script type="text/javascript">
            $('.video').magnificPopup({
                type: 'iframe'
            });
        </script>
    </body>
    </html>

Answer 2

Facebook 更新了他们的视频嵌入 URL。试试这个 https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2{PAGE_NAME}%2Fvideos%2F{VIDEO_ID}%2F

这个URL你可以通过在Facebook上嵌入一个视频来获得。

Lightbox facebook iframe，视频嵌入

Lightbox facebook iframe, video embed

javascript

iframe

jquery

facebook

magnific-popup