将 jquery 与 fancybox 一起用于 youtube 视频......但 Youtube 控件不起作用？答案

【问题标题】：using jquery with fancybox for youtube video.... but Youtube controls dont work?将 jquery 与 fancybox 一起用于 youtube 视频......但 Youtube 控件不起作用？
【发布时间】：2014-01-17 02:00:02
【问题描述】：

当我点击一个小图像时，我有这段代码可以显示一个 youtube 视频，但问题是 youtube 控件（如音量和全屏）并且无法正常工作......但我认为一切都很好！只有 Youtube 播放按钮起作用，音量和其他控件不起作用！

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


<a class="fancybox" rel="group"  href="//www.youtube.com/embed/29tFKSylaGE"  title="Image Veg"><img  src="imagens/pic4.jpg" alt="Image1" title="Image 1"></a>

【问题讨论】：

为什么要用2个版本的jquery？
什么版本的fancybox？检查这个是否有帮助stackoverflow.com/q/14344289/1055987

标签： javascript jquery html youtube fancybox

【解决方案1】：

我遇到了和你一样的问题：iframe 中的 Youtube，虽然视频可以播放，但控件“似乎”不起作用。我一直在寻找答案。最终解决了我的问题是这样的：

https://github.com/fancyapps/fancyBox/issues/516

解决方案非常简单，真的。透明的花式框元素 .fancybox-nav 覆盖了 Youtube 控件。减小该透明导航元素的大小，可以访问它“下方”的控件。

您需要在项目中编辑以下文件：jquery.fancybox.css

就个人而言，我将值更改为：

top: 45%;
width: 20%;
height: 10%;

我的 iframe 中也有网页，我需要能够点击 iframe 中的部分 html，所以我的内容上不能有巨大的透明导航块。如果你只是在做 Youtube，你可以使用更大的导航元素。

这些值相加为 100%，因此要使您的导航图标居中，您的最高值乘以 2 加上高度应该等于 100%。 HTH。

【讨论】：

【解决方案2】：

改变

<a class="fancyYoutube" href="http://i1.ytimg.com/vi/92c3dX-AoXs/default.jpg"><img src="http://i1.ytimg.com/vi/92c3dX-AoXs/default.jpg"></a>

到

<a class="fancyYoutube" id="img1" href="http://i1.ytimg.com/vi/92c3dX-AoXs/default.jpg"><img src="http://i1.ytimg.com/vi/92c3dX-AoXs/default.jpg" alt="img1"></a>

为a标签设置id，然后将img标签的alt设置为该id

【讨论】：

感谢您的帮助，但问题仍然存在！