javascript - bootstrap 折叠 div 上的 fitVids() - 在单个 iframe 上打开多个视频的小错误

Question

奇怪的是，这么知名的插件却出现这个问题。我与它斗争了几个小时，终于胜利了。我认为任何遇到同样问题的人都会非常感激这篇文章。

假设我有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，覆盖目标链接刚刚跟了!!!看来 jQuery fitVids()插件主要指#youtube-frame “src”属性。我的尝试:

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

我累了。我只找到了一个可能的解决方案。我也希望这个脚本的创建者能够增强它......这真的很奇怪，当有人想要保持视频元素的宽高比时，这个脚本不是指向元素的ID，而是困惑'src' 属性周围的东西......就像一个框架只能处理一个 src......呸!

可能的解决方案:

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

正确的顺序是:

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

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

  (最后一点设置 iframe 的 src 属性，从您刚刚单击的链接中获取视频 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 ]

Answer 1

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

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