Lightbox facebook iframe,视频嵌入

Ale*_*lex 4 javascript iframe jquery facebook magnific-popup

我一直在尝试使用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>
Run Code Online (Sandbox Code Playgroud)

JS

$('.video').magnificPopup({
  type: 'iframe'
});
Run Code Online (Sandbox Code Playgroud)

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

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

Dek*_*kel 6

看起来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}
Run Code Online (Sandbox Code Playgroud)

(您应该使用视频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>
Run Code Online (Sandbox Code Playgroud)