title: Hiding/UnHiding Flash Videos With Javascript
body: <p>I am attempting to load an embedded Youtube video when my page loads, and then hide it right away once it has loaded. This is working fine, however when I want to make it visible it appears for just a second then it disappears. This is happening in both Firefox 3.0 and Safari 4, I haven't tried it in any other browsers.</p>
  
  <p>I have tried hiding it using .style.display = 'none' then .style.display = ''; and style.display='block'; to make it visible again, as well as tried using jQuery .hide() and .show() but both methods result in the youtube video vanishing after it is made visible.</p>
  
  <p>Is there a 'proper' way I should be making the &lt;object>...&lt;embed> tags hidden and visible using javascript so it doesn't disappear when I try to make it visible? The reason I'm not just loading the 2nd video dynamically when I need it is I want the video to start downloading so that it is immediately available to be played when I am ready to make it visible.</p>
  
  <p>Below is my html and javascript code snippets:</p>
  
  <p>mute(), play(), stop() are just wrappers for the youtube javascript api calls of the same name.</p>
  
  <p>switchVideoPlayers() is called from an html button passing 1 and 2 as oldid and newid respectively.</p>
  
  <p>I couldn't figure out what pieces I should include as snippets, so I've dumped the whole page below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;YouTube test&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  var player = new Array();
  var currentplayer = 1;
  
  function onYouTubePlayerReady(playerid)
  {
      if (playerid.indexOf('obj') &gt; -1)
      {
          playerid = playerid.substring(3);
      }
  
      debug("player " + playerid + " loaded");
  
      player[playerid] = document.getElementById(playerid);
  
      if (playerid == 1)
          player[playerid].loadVideoById('5hSW67ySCio');
      else
      {
          player[playerid].loadVideoById('VgMVHc5N3WM', 10); //videoid
          mute(playerid);
          setTimeout(function() { 
              stop(playerid);
              $("#obj" + playerid).hide();
          }, 1000);   
  
      }
  }
  
  function play(id)
  {
      player[id].playVideo();
  }
  
  function pause(id)
  {
      player[id].pauseVideo();
  }
  
  function stop(id)
  {
      player[id].stopVideo();
  }
  
  function mute(id)
  {
      player[id].mute();
  }
  
  function unmute(id)
  {
      player[id].unMute();
  }
  
  
  function seek(id,seconds)
  {
      player[id].seekTo(seconds, false);
  }
  
  function getCurrentTime(id)
  {
      return player[id].getCurrentTime();
  }
  
  function loadNewVideo(id,videoid, startseconds)
  {
      player[id].loadVideoById(videoid, startseconds);
      mute(id);
      setTimeout(function() { stop(id); }, 1000); 
  }
  
  function switchVideoPlayers(oldid, newid)
  {
      stop(oldid);
      $("#obj" + oldid).hide();
  
      $("#obj" + newid).show();
      setTimeout(function() {
          unmute(newid);
          play(newid);
      }, 10);
  }
  
  function debug(message)
  {
      $('#debug').html($('#debug').html() + message + "&lt;br /&gt;");
  }
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;object id='obj1' width="425" height="344"&gt;
  &lt;param name="movie" value="http://www.youtube.com/v/5hSW67ySCio&amp;hl=en&amp;fs=1&amp;"&gt;&lt;/param&gt;
  &lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;&lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;
  &lt;embed id='1' src="http://www.youtube.com/apiplayer?enablejsapi=1&amp;playerapiid=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"&gt;&lt;/embed&gt;
  &lt;/object&gt;
  
  &lt;object id='obj2' width="425" height="344"&gt;
  &lt;param name="movie" value="http://www.youtube.com/v/5hSW67ySCio&amp;hl=en&amp;fs=1&amp;"&gt;&lt;/param&gt;
  &lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;&lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;
  &lt;embed id='2' src="http://www.youtube.com/apiplayer?enablejsapi=1&amp;playerapiid=2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"&gt;&lt;/embed&gt;
  &lt;/object&gt;
  
  
  &lt;br /&gt;
  &lt;br /&gt;
  
  &lt;input type='button' value='Play' onclick='play(currentplayer);' /&gt;
  &lt;input type='button' value='Pause' onclick='pause(currentplayer);' /&gt;
  &lt;input type='button' value='Stop' onclick='stop(currentplayer);' /&gt;
  &lt;input type='button' value='Mute' onclick='mute(currentplayer);' /&gt;
  &lt;input type='button' value='UnMute' onclick='unmute(currentplayer);' /&gt;
  &lt;input type='button' value='Seek' onclick='seek(currentplayer,getCurrentTime(currentplayer) + 10);' /&gt;
  &lt;input type='button' value='Get Current Time' onclick='alert(getCurrentTime(currentplayer));' /&gt;
  &lt;input type='button' value='load strain video' onclick='loadNewVideo(currentplayer+1,"VgMVHc5N3WM", 10);' /&gt;
  &lt;input type='button' value='switch to next video' onclick='switchVideoPlayers(currentplayer,currentplayer + 1);' /&gt;
  
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;a href='http://code.google.com/apis/youtube/js_api_reference.html'&gt;api&lt;/a&gt;
  
  &lt;div id='debug'&gt;DEBUG MESSAGES:&lt;br /&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>