0

我一直在努力使用“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>
4

3 回答 3

0

好的，试试这个：确保脚本和 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-26T13:02:37.060 回答
0

您必须使用与fancybox 用于iframe 的类相同的类：“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功能

于 2013-03-26T11:01:36.380 回答
0

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

于 2013-03-26T10:54:05.077 回答