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

标签 css html fancybox-2

我一直致力于使用“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>

最佳答案

您正在从不存在的 javascript 中选择元素,请检查 anchor 标记的 ID 和类...例如“”a#single_image”应该指代 anchor 标记属性 id='single_image',不存在,fancybox 无法初始化。 a#inlinea.group 也是如此(它期望 anchor 中有 class='group' )

关于Css/HTML5 - 需要帮助让 youtube 弹出窗口出现使用 fancybox2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15635127/

相关文章:

javascript - 动态添加和删除表单域

javascript - 将 div 展开到全屏

html - 对齐 CSS 箭头

css - 显示来自 fancybox 的蛋形图像

HTML 图像嵌入链接在 wordpress 中不起作用

css - 在 FireFox 中有效 在 Chrome 中无效?背景图像 : linear-gradient(to bottom, rgb(53, 53, 53), rgb(34, 34, 34));

html - 将 Django URL 插入自定义电子邮件模板

jquery - 在 Fancybox 中自动播放 HTML5 视频

jquery - Fancybox Iframe - 只显示内部内容?

CSS3如何使动画循环播放并且永不停止?