0

Magnific ポップアップを使用して YouTube ビデオを表示しようとしています。リンクをクリックしても何も起こらないという問題があります。エラー メッセージは表示されず、バックアップ動作に戻りません (YouTube へのリンクをたどります)。

デモページのコードを使用して、参照を自分のファイル構造に合わせて更新します。

<head>
  <link rel="stylesheet" href="/css/magnific-popup.css"> 

  <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
  <script src="/js/magnific.min.js"></script> 

</head>

<body>

  <div class="example gc3">
    <h3>Popup with video or map</h3>
    <p>In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</p>
    <div class="html-code">
      <a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a><br/>
  </div>

  <style type="text/css">
 /*** Simple fade transition*/
 .mfp-fade.mfp-bg {
 opacity: 0;
 -webkit-transition: all 0.15s ease-out; 
 -moz-transition: all 0.15s ease-out; 
 transition: all 0.15s ease-out;
 }
 .mfp-fade.mfp-bg.mfp-ready {
 opacity: 0.8;
 }
 .mfp-fade.mfp-bg.mfp-removing {
 opacity: 0;
 }
 .mfp-fade.mfp-wrap .mfp-content {
 opacity: 0;
 -webkit-transition: all 0.15s ease-out; 
 -moz-transition: all 0.15s ease-out; 
 transition: all 0.15s ease-out;
 }
 .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
 opacity: 1;
 }
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
 </style>
 <script type="text/javascript">
 $(document).ready(function() {
   $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
   disableOn: 700,
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
  });
 });
 </script>
 </div>
 </body>
 </html>

サーバーから実行していますが、Chrome、IE9、Safari、Fiefox のどのブラウザーでも結果を取得できません。

http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_typeのドキュメントを見ましたが、実際には理解していないため、それが役立つかどうかはわかりません。

ここで何が起こっているのかについてのヒントはありますか?

4

2 に答える 2

1

私も同じ問題を抱えていましたが、iframe サポートが含まれていないカスタム ビルド スクリプトをダウンロードしたことに気付きました。後でフルバージョンをダウンロードしたところ、すべてが期待どおりに機能しました。

于 2014-01-07T17:19:57.077 に答える
0

http://jsfiddle.net/EF8EF/

 $(document).ready(function() {
   $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
   disableOn: 700,
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
  });
 });

私はそれをあなたのコードで動作させ、ファイルをJavascriptの本体に直接含めました。magnific-popup コードを正しく呼び出していない可能性がありますか?

于 2013-10-29T09:26:19.597 に答える