title: SEO friendly HTML5 video (video.js) intro with overlay fadeout
body: <p>I'm using the <a href="http://videojs.com/" rel="nofollow">video.js</a> plugin and have a video intro that plays when my site loads. It works by autoplaying as soon as the page loads and it is in a div container that is z-indexed and overlayed over my home page.</p>
  
  <p>I have jquery set to <code>delay()</code> and then <code>fadeOut()</code> the div out revealing my home page.</p>
  
  <p>Good in theory only everyone has different connection speeds and the <code>fadeOut()</code> often happens too early or too late.</p>
  
  <p>Is there a way to <code>fadeOut()</code> my div when the video has stopped? </p>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>$(document).ready(function() {
          $("#overlay-video").delay(10000).fadeOut('slow');
     });
  </code></pre>
  
  <p>EDIT: I have also just tried the following but this also does not work:</p>
  
  <pre><code>$(document).ready(function(){
    $("#movie-id").bind('ended', function(){
      alert("planet earth");
    });
  });
  </code></pre>
  
  <p>Thanks for the replies my HTML looks like this:</p>
  
  <pre><code>&lt;div id="overlay-video"&gt;
      &lt;!-- Begin Video.js --&gt;
      &lt;video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}"&gt;
          &lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /&gt;
          &lt;source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' /&gt;
          &lt;source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' /&gt;
      &lt;/video&gt;
      &lt;!-- End Video.js --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My jQuery is working because I can fadeOut the video element fine.</p>