admin管理员组

文章数量:1022688

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. I realized the same thing was happening with PrettyPhoto, and I believe that Facebook might have made a change.

<a class="video" href="/?_rdr=p&video_id=1291445700871053">Open Facebook video here</a>

JS

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

Does anyone know how to mitigate this issue?

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. 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./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

  • javascript
  • jquery
  • facebook
  • iframe
  • magnific-popup
Share Improve this question edited Jun 8, 2016 at 20:10 Alex asked Jun 8, 2016 at 17:58 AlexAlex 9,2858 gold badges42 silver badges89 bronze badges 2
  • +1 for Rickrolling me. The first time I looked (FF/Win7), it was just showing the thumbnail, not playing the video, but now it's playing the video as well. Perhaps it was a temporary issue? – Max Starkenburg Commented Jun 8, 2016 at 19:06
  • @MaxStarkenburg just trying to keep things lively. But actually, I wasn't referring to the fact that it loads, but rather, that it doesn't load within the box so users will have to technically scroll down or up to see the video (image). – Alex Commented Jun 8, 2016 at 20:11
Add a ment  | 

2 Answers 2

Reset to default 7 +50

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./v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.%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 plete code should look like this:

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

Facebook has updated their video embed URL. Try this https://www.facebook./plugins/video.php?href=https%3A%2F%2Fwww.facebook.%2{PAGE_NAME}%2Fvideos%2F{VIDEO_ID}%2F

  • This URL you can get by embedding a video on facebook.

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. I realized the same thing was happening with PrettyPhoto, and I believe that Facebook might have made a change.

<a class="video" href="/?_rdr=p&video_id=1291445700871053">Open Facebook video here</a>

JS

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

Does anyone know how to mitigate this issue?

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. 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./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

  • javascript
  • jquery
  • facebook
  • iframe
  • magnific-popup
Share Improve this question edited Jun 8, 2016 at 20:10 Alex asked Jun 8, 2016 at 17:58 AlexAlex 9,2858 gold badges42 silver badges89 bronze badges 2
  • +1 for Rickrolling me. The first time I looked (FF/Win7), it was just showing the thumbnail, not playing the video, but now it's playing the video as well. Perhaps it was a temporary issue? – Max Starkenburg Commented Jun 8, 2016 at 19:06
  • @MaxStarkenburg just trying to keep things lively. But actually, I wasn't referring to the fact that it loads, but rather, that it doesn't load within the box so users will have to technically scroll down or up to see the video (image). – Alex Commented Jun 8, 2016 at 20:11
Add a ment  | 

2 Answers 2

Reset to default 7 +50

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./v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.%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 plete code should look like this:

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

Facebook has updated their video embed URL. Try this https://www.facebook./plugins/video.php?href=https%3A%2F%2Fwww.facebook.%2{PAGE_NAME}%2Fvideos%2F{VIDEO_ID}%2F

  • This URL you can get by embedding a video on facebook.

本文标签： javascriptLightbox facebook iframevideo embedStack Overflow

版权声明：本文标题：javascript - Lightbox facebook iframe, video embed - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745543032a2155271.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。