title: Fade out html5 video object after play
body: <p>I have a landing page and all I want to do is fade out the  object after it finishes playing to reveal the background underneath. Fading out either the <code>&lt;video&gt;</code> or the <code>&lt;div&gt;</code> tags using jQuery or any other method is fine.</p>
  
  <pre><code>&lt;div id="video"&gt;
  &lt;video width="100%" height="auto" autoplay="autoplay"&gt;
    &lt;source src="monarch.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
    &lt;source src="monarch.ogv" type='video/ogg; codecs="theora, vorbis"'&gt;
  &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>