Css/HTML5 - 需要幫助讓一個YouTube的彈出窗口出現使用fancybox2

我一直在努力獲得一個YouTube視頻播放作爲HTML5使用「fancybox」的彈出窗口。只有我不能彈出它！相反，它似乎總是打開頁面本身，這完全違背了這一點。我可以用一些建議來解決這個問題，你能幫忙嗎？我看過堆棧溢出，但沒有找到明確的答案。Css/HTML5 - 需要幫助讓一個YouTube的彈出窗口出現使用fancybox2

<!DOCTYPE HTML> 
<html> 
    <head> 
     <!--fancy box--> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <!-- /fancy box--> 
     <!--fancy box--> 
     <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script> 
     <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" /> 
     <script> 
      $(document).ready(function() { 

      /* This is basic - uses default settings */ 
      $("a#single_image").fancybox(); 
      /* Using custom settings */ 
      $("a#inline").fancybox({ 
       'hideOnContentClick': true 
      }); 
      /* Apply fancybox to multiple items */ 
      $("a.group").fancybox({ 
       'transitionIn' : 'elastic', 
       'transitionOut' : 'elastic', 
       'speedIn'  : 600, 
       'speedOut'  : 200, 
       'overlayShow' : false 
      }); 

     }); 
     </script> 
     <!-- /fancy box--> 

    </head> 
    <body> 



          <a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo&autoplay=1">Youtube</a><br> 
          <a class="iframe" href="http://www.youtube.com/watch?v=opj24KnzrWo&autoplay=1">This goes to iframe</a><br > 
          <a class="iframe" href="http://www.example.com">This goes to iframe</a><br> 
          <a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a> 

    </body> 
</html>

來源

2013-03-26 rockit

你選擇從JavaScript這是不存在的元素，檢查ID的錨標記的類...例如「」 一個＃single_image「應該是指一個錨定標記與屬性ID = 'single_image'，是不存在的，的fancybox初始化失敗。也是一樣一個＃直列和a.group（預計在錨類= '集團'）

來源

2013-03-26 10:54:05 Aequanox

好了，可我可以擺脫那些。只有如何解決我的問題，pop = up窗口不會彈出？ – rockit 2013-03-26 11:14:27

我無法在沒有更多信息的情況下回答此問題，請粘貼您嘗試運行的代碼。還要確保正確設置fancybox庫的路徑。 – Aequanox 2013-03-26 12:33:32

你有使用fancybox用於iframe的相同類：「fancybox.iframe」

也使用嵌入的youtube鏈接，然後everythings工作正常。

<a class="various fancybox.iframe" href="http://www.youtube.com/embed/usiOu1ZKJ4o">Youtube (iframe)</a>

。

  $(".various").fancybox({ 
       maxWidth : 800, 
       maxHeight : 600, 
       fitToView : false, 
       width  : '70%', 
       height  : '70%', 
       autoSize : false, 
       closeClick : false, 
       openEffect : 'none', 
       closeEffect : 'none' 
      });

使用最新的jQuery庫，最新的是現在使用的1.9 1.9。

而且還使用fancybox.js而不是fancybox.pack.js。這應該夠了吧！！並使用fancybox.iframe作爲一個類，結合另一個類來觸發fancybox功能

來源

2013-03-26 11:01:36 esther

我試過這個，但它沒有解決我的問題......我將CSS樣式添加到了我的頁面頭部，然後添加了您提供的鏈接。它仍然指引我到一個新的頁面 – rockit 2013-03-26 11:10:21

Oke，試試這個：確保指向腳本和css的鏈接是正確的。在我的情況下，子文件夾是js和css。

第一個鏈接包括一個YouTube視頻第二個鏈接的圖像。

<!DOCTYPE HTML> 
<html> 
<head> 
    <!--fancy box--> 
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script> 
    <!-- /fancy box--> 
    <!--fancy box--> 
    <script type="text/javascript" src="js/jquery.fancybox.js"></script> 
    <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" /> 
    <script> 
     $(document).ready(function() { 

     $(".various").fancybox({ 
      maxWidth : 800, 
      maxHeight : 600, 
      fitToView : false, 
      width  : '70%', 
      height  : '70%', 
      autoSize : false, 
      closeClick : false, 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 

    }); 
    </script> 
    <!-- /fancy box--> 

</head> 
<body> 

    <ul class="list"> 

     <li> 
      <a class=" various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">youtube</a> 
     </li> 
     <li> 
      <a class="various" href="http://androidactivist.org/wp-content/uploads/2012/03/draw-something-koopa.jpg" title="Lorem ipsum dolor sit amet"><img src="http://androidactivist.org/wp-content/uploads/2012/03/draw-something-koopa.jpg" alt="" /></a> 
     </li> 
    </ul>

來源

2013-03-26 13:02:37 esther

Css/HTML5 - 需要幫助讓一個YouTube的彈出窗口出現使用fancybox2

回答

相關問題