CSS 隐藏 Youtube 视频在 IE 中不起作用答案

【问题标题】：CSS Hide Youtube Video not working in IECSS 隐藏 Youtube 视频在 IE 中不起作用
【发布时间】：2011-02-10 05:55:32
【问题描述】：

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

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

但是 a_video 的 css：

display:none;

没有隐藏在 IE 中。

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

【问题讨论】：

您是否尝试将视频放入div 并将其设置为display: none？
你能发布你的 html 和你的 IE 隐藏的 css 吗？如果您正在使用这些，任何条件样式表也包括在内。

标签： jquery css video youtube embedding

【解决方案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>

【讨论】：

您的videoCode 不包含<object> </object> 标签，因此您下次检查时不会检测到视频是否存在，还是我错了？
var videoCode = $('#container').html(); 应该可以，如果我错过了什么，请忽略我；）
更新了代码。使用$('object').parent().html() 比专门选择#container 元素更好，因为它更灵活（尽管选择带有提供标记的容器也可以）。
嗯，这有点像，因为你必须使用#container 元素来附加它，所以它使代码更具可读性/可理解性。这不是至少赚+1吗？ :) 无论如何，很好的解决方案，使用它，谢谢！

【解决方案2】：

我已经看到了这个 IE8 错误。如果您指向溢出：隐藏在有问题的块元素处，这应该可以解决问题。您可能需要将 Youtube 嵌入代码放入其中。

【讨论】：