1

奇怪的是，这么有名的插件竟然出现了这个问题。我与它抗争了几个小时，终于赢了。我认为任何遇到相同问题的人都会非常感谢这篇文章。

假设我有Twitter-Bootstrap（或另一个能够折叠/展开 div 的类似框架）。众所周知，iframe 可以通过链接来定位，以在其中显示不同的 URL。在这种情况下，我指的是显示在唯一 iframe 中的不同 youtube 视频。

    <a href="https://www.youtube.com/embed/Bfwg4wRcnDI" target="#youtube-frame">
             Open this video into the youtube iframe
    </a>

假设#youtubecontainer，它是 的父级#youtube-frame，被折叠。我单击一个链接目标#youtube-frame（如上面显示的代码），并通过 jQuery.onclick事件#youtubecontainer得到扩展。然后fitVids()被应用到它（除了在代码上的这一点之外无法完成：事实上，在扩展之前，#youtubecontainer js 甚至不存在）。但是……惊喜！

fitVids()已从原始 html中获取'src' 属性并将其应用于 iframe，覆盖我刚刚关注的目标链接！！！似乎 jQueryfitVids()插件主要是指#youtube-frame'src' 属性。我的尝试：

  • 如果您将某个视频留在“src”中，则该视频将覆盖您单击的任何其他视频。
  • 如果您将 'src' 保留为空，或者您甚至完全删除该属性，您将无法解决问题，而且您只会看到一个黑框，而不是不需要的视频。:D
  • 如果您第二次单击链接，您最终会得到它。但这很烦人。
  • 如果您编辑 jquery.fitvids.js（var 选择器），删除所有 youtube 'iframe src' 选择器并为“#youtube_frame”添加一个条目，这也不会解决问题。

我累了。我发现只有一个可能的解决方案。我也希望这个脚本的创建者能够增强它......这真的很奇怪，当有人想要保持视频元素的纵横比时，这个脚本不是指向元素的 ID，而是把事情弄乱了 'src'属性......就像一个框架只能处理一个src......呸！

可能的解决方案：

  1. 在 jQuery 中使用时间并保持正确的顺序，使用eventhandlersor setTimeout()。为此，您需要更改链接到视频的方式：<a target="#youtube_frame"您需要使用 jquery 处理点击，而不是使用比 fitVids 更早触发的 ，更改 iframe 的 'src' 属性。

正确的顺序是：

  • 1) Expand the Video Container;
  • 2）fitVids()在它上面；

  • 3)$('#youtube_frame').attr('src', $(this).attr('href'))

    （最后一点设置srciframe 的属性，从您刚刚单击的链接中获取视频 url）。当然，这必须放在一个在点击事件上执行的函数中。

如果您有其他解决方案，请发布它们。我希望 fixVids 的创建者能够了解这个问题。我个人不知道如何完全修复插件，因为它只留下'src'属性。

 EDIT: I've just added a testcase: http://jsbin.com/huzedamu/2/edit?js,output 
 Unfortunately jsbin doesn't allow the loading of youtube videos through its website, 
 but you can copy/paste the following pastebin, you'll see the bug more clearly:

 [no matter what video you choose, at the first try you'll always get what's 
  inside the iframe 'src' attribute, which in the pastebin is a pretty old video]

新的单页测试案例 > [ http://pastebin.com/uLjJvhxC ]

4

1 回答 1

0

这里有一个问题跟踪器：https ://github.com/davatron5000/FitVids.js/issues?direction=desc&sort=created&state=open

最好创建一个简化的测试用例。

于 2014-03-13T14:24:04.813 回答