Javascript YouTube视频在隐藏和显示其容器div时重新启动

我将youtube视频嵌入到我的页面中的一个div中，可以通过按钮隐藏和显示（使用jQuery/css）。当我隐藏并显示然后显示div时，视频必须重新加载并从头开始。有没有办法从同一位置记住视频的进度和播放？或者更好的方法是不需要重新加载视频

以下是div/YouTube视频的html5：

    <div id="you-tube-div">
       <object width="640" height="390" data="http://www.youtube.com/v/fQ2Lnln2BOk" type="application/x-shockwave-flash">
          <param name="src" value="www.youtube.com/v/fQ2Lnln2BOk"/>
       </object>
    </div>

编辑：

下面是一个小jFiddle，它显示了我正在尝试做的事情：

---

是否需要使用“显示”属性隐藏视频？如果使用属性“visibility”和值“visible”和“hidden”来控制项目的可见性，则视频将保留其暂停位置

是一个关于显示和可见性属性之间差异的链接

以下是需要考虑的其他事项：

• 如果不暂停视频，并将“可见性”设置为“隐藏”，则视频和音频将继续播放。但是，您可以使用来控制视频

• 如果使用可见性，块元素仍将影响其周围的元素，您将无法看到它们。这就是为什么属性只是“可见性”

---

如果您确实希望/需要使用display属性（这并不奇怪），那么当您选择隐藏视频时，您将希望将视频的某些信息存储在一个变量中（例如，它的播放点），然后在再次单击按钮以显示视频时使用该值，但从视频中停止的点开始。我不推荐对youtube API有足够的了解。。。这将使您能够随心所欲地操纵youtube视频。如果您有任何问题，请告诉我，祝您好运

我建议将嵌入的对象转换为较新的iframe元素以嵌入youtube视频。使用此stackoverflow post中的代码：

我创造了这把小提琴，它可以满足你的需要：

---

post啊酷，我以前从未使用过JSFIDLE。很酷！我已经添加了一个小jfiddle的链接，显示了我正在尝试做什么。如果您按下视频上的播放按钮，然后将其隐藏，然后再次显示，视频将重新启动（这并不奇怪），但我想知道是否有一种方法可以让我记住它在隐藏之前的播放位置。谢谢谢谢，这也是非常有用的！没问题@Mike2012！很高兴我能帮忙：-）它在chrome中运行良好，但在Firefox中失败。只是在JSFIDLE中尝试了这个提琴，它从一开始就重新启动了视频，而不是暂停的位置。谢谢

//via: https://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("you-tube-div");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}