javascript - FancyBox 不会播放 youtube 视频

标签 javascript jquery html css fancybox

<分区>

我很难让 Jquery fancybox 插件播放 youtube 视频。我已经浏览了其他人在此站点上发布的一些解决方案,但我仍然在某个地方遗漏了一些东西,但我看不到它。编码等领域的新手。

好的。在这里,我制作了一个快速测试页面并抓取了一个随机的 youtube 视频。这是我的页面代码的样子:

  <!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <script type="text/javascript" src="jQuery/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="fancyapps-fancyBox-        18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />

  <script type="text/javascript" src="fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>

  <script type="text/javascript" src="fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });


$(document).ready(function() {
    $('.videos').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
        media : {}
        }
    });
});
</script>

<style type="text/css">
</style>
</head>


<body>
<ul class="list">
<li><a class="videos" href="https://www.youtube.com/watch?v=hS5CfP8n_js">Youtube</a></li>
</ul>

</body>
</html>

有人能帮忙吗?

最佳答案

您是否尝试过 here 中列出的答案? ?

$(".videos").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 640,
        'height'        : 385,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
        'wmode'             : 'transparent',
        'allowfullscreen'   : 'true'
        }
    });

    return false;
});

如果您的链接已经直接指向嵌入式版本,您可以将 href 更改为 this.href 或直接删除。

关于javascript - FancyBox 不会播放 youtube 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31196433/

上一篇:html - 缩小图像并保持纵横比

下一篇:html - 移动设备上的图库

相关文章:

javascript - jQuery Ajax 不将数组作为数据对象发送

javascript - JS 滚动条滚动不流畅

javascript - 如何使用 javascript 将父键添加到 json 对象

javascript - HTML 表格 : Sticky column overlapping header

javascript - Node JS - 如何在同一 session 中逐一运行跨浏览器测试?

javascript - 使用javascript获取文件的目录

HTML:使用嵌套 <form> 的风险?

html - CSS 页脚对齐在 FF 和 IE 中运行

javascript - jquery - 禁用所有选择框?

javascript - 缩略图区域需要 jquery slider