CSS Hide Youtube Video not working in IE

Question

I have a youtube video like so...

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

However the css for a_video:

display:none;

Isn't hiding it in IE.

Anyone know how to hide embedded youtube videos in IE?

Answer 1

If I remember correctly, I also had this problem before. Though my video would stop displaying, but I could hear it continuing to play in the background. The solution I used was to remove it completely and return it when needed.

Like this:

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

This function does a few things... first, it sets the HTML code associated to the video (the object) into a variable so it can remember it. Then, it gives a button the ability to show / hide the video (I'm assuming that is the intended behavior). So, when the button is clicked, it checks to see if a video is currently in the page, if it is, it removes it from the DOM, and if it isn't, and takes the stored HTML and reapplies it to the video's container.

Here's the HTML that went with that:

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

Answer 2

I've seen this IE8 bug. If you point overflow: hidden at the block elements that are having issues, this should do the trick. You may need to put the Youtube embed code in something.