Fade out html5 video object after play

Question

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 <video> or the <div> tags using jQuery or any other method is fine.

<div id="video">
<video width="100%" height="auto" autoplay="autoplay">
  <source src="monarch.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="monarch.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>

Answer 1

Try the following:

$('#video video').bind('ended', function(){
   $(this).parent().fadeOut()
})