Onclick events are getting ignored in IE8 standard

I have written code that display a video on the left and links on the right that changes what video is displayed.  I am switching the videos out using javascript onclick events that calls my javascript function.  The function simply hides or displays the video with a  document.getElementById('').style.display = "none"; or  document.getElementById('scheduling').style.display = "";
The code works fine in all browsers and versions except IE8.  I am not seeing any errors in the developer tools either.  The videos just don't appear.

Here is some snippets of my code:
Video Player Code:

 <div id="videocenter">
		<video id="fourKeys"  controls preload="none" poster="mockpic.jpg" tabindex="0" width="512px" height="288px" style="display:''">
			 <source src="mockvideo.mp4" type="video/mp4" />
			 <source src="mockvideo.webm" type="video/webm" />
			 <object width="512px" height="288px" type="application/x-shockwave-flash" data="salescontent/flash/flowplayer/flowplayer-3.2.8.swf">
			 	<param name="movie" value="../../flash/flowplayer/flowplayer-3.2.8.swf" />
			 	<param name="allowScriptAccess" value="sameDomain"></param>
			   <param name="allowFullScreen" value="true" />
			   <param name="wmode" value="transparent" />
			   <param name="flashVars" value="config={'clip':{'url':'mockvideo.mp4','autoPlay':false, 'autoBuffering':true}}" />
			 </object>
			</video>
		</div><!-- videocenter -->
    
     <!--Two Traps to Avoid With Potential Clients - Part 1 -->
  <div id="videocenter">
		<video id="twoTraps_pt1"  controls preload="none" poster="mockpic2.jpg" tabindex="0" width="512px" height="288px" style="display:none">
			 <source src="mockvideo2.mp4" type="video/mp4" />
			 <source src="mockvideo2.webm" type="video/webm" />
			 <object width="512px" height="288px" type="application/x-shockwave-flash" data="salescontent/flash/flowplayer/flowplayer-3.2.8.swf">
			 	<param name="movie" value="../../flash/flowplayer/flowplayer-3.2.8.swf" />
			 	<param name="allowScriptAccess" value="sameDomain"></param>
			   <param name="allowFullScreen" value="true" />
			   <param name="wmode" value="transparent" />
			   <param name="flashVars" value="config={'clip':{'url':'mockvideo2.mp4','autoPlay':false, 'autoBuffering':true}}" />
			 </object>
			</video>
		</div><!-- videocenter -->

Links to switch between videos:
 <ul>
      <li><a href="javascript:void(0);" onClick="showVideo('fourKeys');">Four Key Steps of the Financial Planning Process</a></li>
      <li><a href="javascript:void(0);" onClick="showVideo('twoTraps_pt1');">Two Traps to Avoid With Potential Clients - Part 1</a></li>
       <li><a href="javascript:void(0);" onClick="showVideo('twoTraps_pt2');">Two Traps to Avoid With Potential Clients - Part 2</a></li>
      <li><a href="javascript:void(0);" onClick="showVideo('attaining');">Attaining Need Awareness by the Client</a></li>
   </ul> 

Javascript Function:
<script language="javascript" type="text/javascript">
      function showVideo(varVideo){
        document.getElementById('fourKeys').style.display = "none";
    
        document.getElementById('twoTraps_pt1').style.display = "none";
  
        document.getElementById('twoTraps_pt2').style.display = "none";
        
        document.getElementById('attaining').style.display = "none";
       
        
        document.getElementById(varVideo).style.display = "";
    
      }
      
    </script>

Select allOpen in new window