This is my first question on Stack Overflow - please be gentle. ;)
I am working on an HTML5 website and have decided to implement HTML5 video at the top of the Home page. I've got the video working fine, but the HTML code relies on "Autoplay" being enabled on the video - which is a "no go" on iOS (and, I would assume, other mobile devices):
<div class="bg1">
<div id="overlay"></div>
<video autoplay loop class="fillWidth">
<source src="video/filename.mp4" type="video/mp4"/>
<source src="video/filename.ogg" type="video/ogg"/>
<source src="video/filename.webm" type="video/webm"/>
<img src="/images/bg1.jpg" title="Your browser does not support the <video> tag" />
</video>
</div>
Notes:
1) The "Overlay" div contains a transparent PNG that sits above the video (with transparent areas that the video shows through).
2) The "fillWidth" class stretches the video to fit the width of the browser.
3) I have an image fallback for older browsers, which has been tested and works great.
So here's the problem: when I pull this test site up on my iPhone/iPad, the video window shows up but the "Play" icon has a slash through it (since iOS doesn't like the autoplay functionality I've set for the video).
So what I'd like to know is: is there a way to "comment out" these 6 lines of code (perhaps using JavaScript?) when the website is being viewed on a mobile device, but leave it in for desktop users?
EDIT:
The video is in the background of a div, so user controls are hidden intentionally. Also: I am not great at writing custom Javascript, so I really need things spelled out for me if you know a JS workaround. (Sorry about that.)