jquery - CSS 隐藏 Youtube 视频在 IE 中不起作用

Question

我有一个像这样的 youtube 视频...

<object id="video_1" class="a_video .......

但是 a_video 的 css:

display:none;

没有在 IE 中隐藏它。

有人知道如何在 IE 中隐藏嵌入的 YouTube 视频吗？

Answer 1

如果我没记错的话，我之前也遇到过这个问题。虽然我的视频会停止显示，但我可以听到它在后台继续播放。我使用的解决方案是将其完全删除并在需要时返回。

像这样:

(function($){
  $(function(){
    var videoCode = $('object').parent().html();
    $('#toggleButton').bind('click',function(e){
      if($('object').length) {
       $('object').remove(); 
      } else {
       $("#container").append(videoCode); 
      }
    });
  });
})(jQuery);​

这个函数做了一些事情...首先，它将与视频(对象)关联的 HTML 代码设置到一个变量中，以便它可以记住它。然后，它使按钮能够显示/隐藏视频(我假设这是预期的行为)。因此，当单击该按钮时，它会检查页面中当前是否有视频，如果在，则将其从 DOM 中删除，如果不在，则获取存储的 HTML 并将其重新应用到视频的容器。

这是附带的 HTML:

  <div id="container">
    <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/hQVTIJBZook&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/hQVTIJBZook&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
  </div>
  <a href="#" id="toggleButton">Toggle Video</a>