Question

我一直致力于使用“fancybox”将YouTube视频播放为HTML5中的弹出窗口。只有我不能让它弹出！相反，似乎总是打开页面本身，这完全违背了这一点。我可以就如何解决这个问题使用一些建议，你能帮忙吗？我查看了堆栈溢出但没有找到这个用例的明确答案。

 <!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>

Answer 1

您正在从javascript中选择不存在的元素，请检查ID为锚标记的类...例如“” a＃single_image “应引用锚点标记属性 id ='single_image'，不存在，fancybox无法初始化。同样适用于 a #inline 和 a.group （它希望锚中的class ='group'）

Answer 2

您必须使用与iframe的fancybox相同的类：“fancybox.iframe”

还可以使用嵌入的youtube链接。然后，每个方法都可以正常工作。

<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.4。

并且还使用fancybox.js而不是fancybox.pack.js。这应该够了吧！！并且还使用fancybox.iframe作为一个类，结合另一个类来触发fancybox函数

Answer 3

Oke，试试这个：确保指向script和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>

Css / HTML5 - 需要帮助使用fancybox2显示youtube弹出窗口

3 个答案: