Fancybox 2.0 and Youtube Video

我想在新的fancybox中打开一个youtube视频。我不能让它工作。它总是直接进入页面，而不是在花哨的盒子中打开它。下面是代码:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>youtube video</title>
        <link rel="stylesheet" href="css/jquery.fancybox.css" />
        <script src="./js/jquery-1.9.1.min.js"></script>
        <script src="./js/jquery.fancybox.pack.js"></script>
        <script>
            $(document).ready(function(){
                $(".fancybox-media").fancybox({
                    openEffect  : 'none',
                    closeEffect : 'none',
                    helpers : {
                        media : {}
                    }
                });
            });
        </script>
    </head>
    <body>
        <a href="http://www.youtube.com/watch?v=b_ojoebJyvc" class="fancybox-media">Video</a>
    </body>
</html>

我做错了什么?我还尝试了以下代码(如fancybox网站上所述):

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>youtube test</title>
        <link rel="stylesheet" href="css/jquery.fancybox.css" />
        <link rel="stylesheet" href="css/jquery.fancybox-buttons.css" />
        <link rel="stylesheet" href="css/jquery.fancybox-thumbs.css" />

    </head>
    <body>
        <a class="various fancybox.iframe" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&amp;autoplay=1"><img src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" width="200" /></a>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/jquery.fancybox.pack.js"></script>
        <script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
        <script src="js/jquery.fancybox-buttons.js"></script>
        <script src="js/jquery.fancybox-media.js"></script>
        <script src="js/jquery.fancybox-thumbs.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".various").fancybox({
                    maxWidth    : 800,
                    maxHeight   : 600,
                    fitToView   : false,
                    width       : '70%',
                    height      : '70%',
                    autoSize    : false,
                    closeClick  : false,
                    openEffect  : 'elastic',
                    closeEffect : 'none'
                });
            });
        </script>
    </body>
</html>

此代码应与本页相同。有什么区别呢?

编辑:

这是youtube的链接!

http://www.youtube.com/v/ZeStnz5c2GI?fs=1&播放= 1

工作。

这个链接没有

http://www.youtube.com/watch?v=b_ojoebJyvc

我能做什么?

$(document).ready(function() {
    $(".various").click(function() {
        $.fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'elastic',
            closeEffect : 'none',
            href        : this.href.replace(new RegExp("watch\?v=", "i"), 'v/') + '?fs=1&autoplay=1'
        });
        //alert(this.href.replace(new RegExp("watch\?v=", "i"), 'v/'));
        alert(this.href);
    });
});

这行不通。href永远不会被覆盖!

这也不工作(它总是跟着链接，没有fancybox是开放的):

$(document).ready(function() {
    $(".various").click(function() {
        $.fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'elastic',
            closeEffect : 'none',
            beforeLoad  : function(){
                var url= $(this.element).data("href");
                url.replace(new RegExp("watch\?v=", "i"), 'v/') + '?fs=1&autoplay=1'
                this.href = url
                alert(url);
            }
        });
        //alert(this.href.replace(new RegExp("watch\?v=", "i"), 'v/'));
        //alert(this.href);
    });
});

所以我认为你可以忘记fancybox 2.0。

再次感谢肯尼迪。现在可以运行了:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>youtube test</title>
        <link rel="stylesheet" href="css/jquery.fancybox.css" />
    </head>
    <body>
        <a class="various fancybox.iframe" href="http://www.youtube.com/watch?v=L9szn1QQfas"><img src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" width="200" /></a>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery.fancybox.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".various").fancybox({
                    maxWidth    : 800,
                    maxHeight   : 600,
                    fitToView   : false,
                    width       : '70%',
                    height      : '70%',
                    autoSize    : false,
                    closeClick  : false,
                    openEffect  : 'elastic',
                    closeEffect : 'none',
                    beforeLoad  : function(){
                        var url= $(this.element).attr("href");
                        url = url.replace(new RegExp("watch\?v=", "i"), 'v/');
                        url += '?fs=1&autoplay=1';
                        this.href = url
                    }
                });
            });
        </script>
    </body>
</html>

删除class属性中的点，它应该工作:

<a href="http://www.youtube.com/watch?v=qnydFmqHuVo" class="fancybox-media">Video</a>

(编辑)

相关内容

最新更新

热门标签：