Лайтбоксы facebook iframe, video embed

Я пытаюсь создать полнофункциональный всплывающий файл (лайтбокс) для загрузки фреймворков встраиваемых фреймов. Раньше я использовал PrettyPhoto, однако я хотел сделать переключатель. Как ни странно, используя ту же методологию, которую я имею в следующем кодефе, iframe не может правильно загрузить (например, в пределах игрока) для Facebook. Я понял, что то же самое происходило с PrettyPhoto, и я считаю, что Facebook, возможно, внес изменения.Лайтбоксы facebook iframe, video embed

<a class="video" href="http://www.facebook.com/video/embed/?_rdr=p&video_id=1291445700871053">Open Facebook video here</a>

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

Кто-нибудь знает, как смягчить эту проблему?

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

источник

2016-06-08 Alex

+1 для рикроллинг меня. В первый раз, когда я посмотрел (FF/Win7), он просто показывал миниатюру, а не воспроизводил видео, но теперь он также воспроизводит видео. Возможно, это временная проблема? –

@MaxStarkenburg просто пытается держать вещи живыми. Но на самом деле я не имел в виду тот факт, что он загружается, а скорее, что он не загружается в поле, так что пользователям придется технически прокручивать вниз или вверх, чтобы увидеть видео (изображение). – Alex

Похоже, что Facebook изменил HTML они создали для версии embed_html видеопроигрывателя.

Вы можете использовать эту ссылку, вместо того, чтобы сделать эту работу:

https://www.facebook.com/v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3D{VIDEO_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>

источник

2016-06-14 14:53:08 Dekel

Это то, что я сейчас делаю, к сожалению, кажется, что facebook, должно быть, изменил свой код. Это отстой, потому что люди, которые публикуют видео, могут указать, нет ли встраивания, и оригинальный способ, который я использовал, по-видимому, обошел это и покажет любое видео. Я буду ждать, если кто-нибудь придумает какую-нибудь другую магию; иначе я награжу вас щедростью. Благодаря! – Alex

@Alex, код, который я только что дал вам, работает так, как вы хотите. Вы всегда можете изменить URL-адрес всех якорей, которые начинаются с 'http: // www.facebook.com/video/embed', в новый рабочий url (используя jQuery) перед вызовом magnificPopup. – Dekel

Лайтбоксы facebook iframe, video embed

ответ

Смежные вопросы