javascriptjqueryfacebookiframemagnific-popup

Lightbox facebook iframe, video embed

I have been trying to Magnific Popup (a lightbox) to load facebook video embed iframes. Previously I was using PrettyPhoto, however I wanted to make the switch. Strangely, utilizing the same methodology I have in the following codepen the iframe fails to load properly (e.g. within the bounds of the player) for Facebook. enter image description here I realized the same thing was happening with PrettyPhoto, and I believe that Facebook might have made a change.

<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'
});

Does anyone know how to mitigate this issue?

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

Solution

  • It seems like Facebook changed the HTML they created for the embed_html version of the video player.

    You can use this link instead to make that work:

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

    (You should change the {VIDEO_ID} at the end of the link with the ID of your video).

    Your complete code should look like this:

    <!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>