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
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
2 Answers
Reset to default 7 +50It 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.