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

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

css html

Css/HTML5-需要帮助使用fancybox2显示youtube弹出窗口吗,css,html,fancybox-2,Css,Html,Fancybox 2,我一直在努力用“fancybox”在HTML5上播放一段youtube视频。只是我不能让它弹出！相反，它似乎总是打开页面本身，这完全违背了主题。我需要一些建议来解决这个问题，你能帮忙吗？我已经查看了堆栈溢出，但没有找到这个用例的明确答案 <!DOCTYPE HTML> <html> <head>  <script type="text/javascript" src="

我一直在努力用“fancybox”在HTML5上播放一段youtube视频。只是我不能让它弹出！相反，它似乎总是打开页面本身，这完全违背了主题。我需要一些建议来解决这个问题，你能帮忙吗？我已经查看了堆栈溢出，但没有找到这个用例的明确答案

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


$（文档）.ready（函数（）{
/*这是基本设置-使用默认设置*/
$（“单个图像”）.fancybox（）；
/*使用自定义设置*/
$（“内联”）.fancybox({
“hideOnContentClick”：true
});
/*将fancybox应用于多个项目*/
$（“a.group”）.fancybox({
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“speedIn”：600，
“加速输出”：200，
“叠加显示”：错误
});
});

如果要从javascript中选择不存在的元素，请检查锚定标记类的ID。。。例如，“a#single_image”应指属性为id='single_image'的锚定标记，如果不存在，fancybox无法初始化。

a#inline和a.group（它期望锚定中有class='group'）

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

还可以使用嵌入的youtube链接，这样一切都可以正常运行

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

使用最新的jquery库，现在最新的是1.9，您正在使用1.4

并使用fancybox.js而不是fancybox.pack.js。这应该可以做到！！还可以使用fancybox.iframe作为一个类，结合另一个类来触发fancybox函数

OK，尝试以下操作：确保指向脚本和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>


$（文档）.ready（函数（）{
$（“.Variable”）.fancybox({
最大宽度：800，
最大高度：600，
菲托维：错，
宽度：“70%”，
身高：70%，
自动调整大小：false，
closeClick:false，
openEffect:'无'，
近距离效应：“无”
});
});

我尝试了这个方法，但没有解决我的问题……我在页面的头部添加了css样式，然后添加了您提供的链接。它仍然将我指向一个新页面OK，所以我可以摆脱这些。只有在弹出窗口不弹出的情况下，我才能解决我的问题？如果没有更多信息，我无法回答这个问题，请粘贴您正在尝试的代码运行。还要确保fancybox库的路径设置正确。

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