iPad HTML5 Video tag with div overlay with form not working

If you have a page that detects browser and feeds up the Flash version for browsers that’ll accept it and the HTML5 version for those that will take that, you may have noticed that trying to display a DIV over the top of the video renders that <form> inside to not work on the iPad. It’s like the Video tag is a black hole for user input.

One workaround is to change the visibility of the video tag to hidden”

<script language="javascript">
function toggleDivFlagForm() {
  if ( document.getElementById('divFlagForm').style.display == 'none' )
  {
     document.getElementById('divFlagForm').style.display = 'inline';
    document.getElementById('dVideo').style.display = 'none';
  }
  else
  {
     document.getElementById('divFlagForm').style.display = 'none';
    document.getElementById('dVideo').style.display = 'inline';
  }
}
</script>

http://www.koopman.me/test2.html

<html>
<head><title>Video test</title>
<script language="javascript">
function toggleDivFlagForm() {
  if ( document.getElementById('divFlagForm').style.display == 'none' )
  {
     document.getElementById('divFlagForm').style.display = 'inline';
    document.getElementById('dVideo').style.display = 'none';
  }
  else
  {
     document.getElementById('divFlagForm').style.display = 'none';
    document.getElementById('dVideo').style.display = 'inline';
  }
}
</script>
</head>
<body>

<a href="#" onClick="toggleDivFlagForm(); return false;">Toggle Form</a><br />

<div id="divFlagForm" style="position:absolute; left:100px; top:100px; display:none; ">
<form method="GET">
Name: <input type="text" name="name" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" value="Submit" />
</form>
</div>

<div id="dVideo">
<object style="visibility: visible;" id="flashcontent1273" data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" height="390" width="584">
<param value="true" name="allowfullscreen">
<param value="always" name="allowscriptaccess">
<param value="src=http%3A%2F%2Fcache.nebula.phx3.secureserver.net%2Fobj%2FNDEyMkYyRDk1MEM3MENBN0FFRDM6YTE5MTgwMThlMGQ0OTEwY2RmOGUwZjMxZWM3NjA4ZTM%3D&amp;controlBarMode=docked&amp;controlBarAutoHide=false&amp;poster=http://www.koopman.me/wp-content/uploads/2011/01/OFF_Drop_VidScreen.jpg&amp;playButtonOverlay=true&amp;loop=false&amp;autoPlay=false&amp;streamType=liveOrRecorded&amp;scaleMode=letterbox" name="flashvars">
</object>
</div>

<script language="javascript">
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) 
        document.getElementById("dVideo").innerHTML = '<video width="584" height="390" poster="http://www.koopman.me/wp-content/uploads/2011/01/OFF_Drop_VidScreen.jpg" src="http://cache.nebula.phx3.secureserver.net/obj/NDEyMkYyRDk1MEM3MENBN0FFRDM6YTE5MTgwMThlMGQ0OTEwY2RmOGUwZjMxZWM3NjA4ZTM" controls />'; 
</script>

</body>
</html>