title: Image placeholder fallback for HTML5 Video
body: <p>I'm using the following code to implement an HTML5 video on a page</p>
  
  <pre><code>&lt;video autoplay&gt;
      &lt;source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&gt;
      &lt;source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>This works great, embedded on my page in FF, Safari, and Chrome. What I'd like, since this video has no controls, and is mean to be embedded in the page with no borders (white BG in the video) is to have an image appear in place of the video.</p>
  
  <p>I'd like to have an image as the fallback if the video can't be rendered with the  element. I've seen the following post: <a href="https://stackoverflow.com/questions/6576746/html5-video-fallback-advice-no-flash">html5 video fallback advice (no flash)</a> which started the discussion. But not sure if those answers were what I needed.</p>
  
  <p>My gut tells me that I can have JQuery detect the video capability, and if video is not supported, then write out some HTML that shows an image. But I was looking to see if there's something that could be simpler.</p>