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>

703 thoughts on “iPad HTML5 Video tag with div overlay with form not working

  1. Sorry it took so long for me to see and approve your comment. I get clobbered with spam. Every time I check, there are 50+ comments pending approval, I get tired of reading them / marking them spam. So tired, I miss the valid ones.

    Sorry about the broken link. I’ll have to fix it soon. I deleted the file, ugh. I’ll need to recreate it from scratch.

  2. I had to recreate it from Scratch, had lost the file. It’s there now, and I added the source code to the article in case I accidentally delete the test2.html file again.

Comments are closed.