Lightbox facebook iframe，视频嵌入
Posted
技术标签:
【中文标题】Lightbox facebook iframe，视频嵌入【英文标题】：Lightbox facebook iframe, video embed 【发布时间】：2016-10-09 03:27:39 【问题描述】：我一直在尝试 Magnific Popup（一个灯箱）来加载 facebook 视频嵌入 iframe。以前我使用的是 PrettyPhoto，但我想进行切换。奇怪的是，使用我在以下 codepen 中使用的相同方法，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
【问题讨论】：
+1 为 Rickrolling 我。我第一次看（FF / Win7）时，它只是显示缩略图，没有播放视频，但现在它也在播放视频。也许这是一个暂时的问题？ @MaxStarkenburg 只是想让事情保持活跃。但实际上，我指的不是它加载的事实，而是它不会在框中加载，因此用户必须在技术上向下或向上滚动才能看到视频（图像）。 【参考方案1】：Facebook 似乎更改了他们为 embed_html 版本的视频播放器创建的 HTML。
您可以改用此链接来完成这项工作：
https://www.facebook.com/v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3DVIDEO_ID
（您应该将链接末尾的 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>【讨论】：
这就是我目前正在做的事情，不幸的是，Facebook 似乎必须更改他们的代码。这很糟糕，因为发布视频的人可以指定不嵌入，而我使用的原始方式似乎绕过了这个并且会显示任何视频。我会等着看是否有人想出任何其他魔法；否则我会给你赏金。谢谢！ @Alex，我刚刚给你的代码完全按照你想要的方式工作。在调用 magnificPopup 之前，您始终可以将所有以http://www.facebook.com/video/embed 开头的锚点的 URL 更改为新的工作 url（使用 jQuery）。【参考方案2】：
Facebook 更新了他们的视频嵌入 URL。尝试这个 https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2PAGE_NAME%2Fvideos%2FVIDEO_ID%2F
您可以通过在 facebook 上嵌入视频来获取此 URL。【讨论】：
以上是关于Lightbox facebook iframe，视频嵌入的主要内容，如果未能解决你的问题，请参考以下文章
PayPal 自适应支付 - returnUrl 显示在 Lightbox IFrame 中
iframe 选项卡 Facebook 应用程序显示在新页面上，而不是在 iframe/facebook-canvas 内
使用 Laravel 作为后端发送 iframe 代码时，Bootstrap 模板中的 Facebook 页面 iFrame 显示问题 [重复]