我一直在尝试Magnific Popup(一个灯箱)来加载Facebook视频嵌入的iframe。以前我使用的是PrettyPhoto,但是我想进行切换。奇怪的是,使用我在以下代码 jar 中使用的相同方法,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
最佳答案
好像Facebook更改了他们为视频播放器的embed_html版本创建的HTML。
您可以改用此链接来完成该工作:
https://www.facebook.com/v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3D{VIDEO_ID}
(您应在链接末尾用您的视频ID更改{VIDEO_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>