title: Jquery animate HTML5 Video
body: <p>I am trying to get my video to start at 40% of its original size and once you mouse over it, it animates to 100%. The original size of the div is 760x520 pixels and I need it to start at 300x250 pixels. Heres is the HTML:</p>
  
  <pre><code>      &lt;div id="background"&gt; 
           &lt;img src="image/background.jpg" width="760" height="520" style="width:760px;height:520px;position:absolute; top:9px; left:9px;"&gt;
           &lt;img src="image/videoPanel02.png" style="width:643px; height:366px;position:absolute;top:62px;left:68px;z-index:inherit;"&gt;
           &lt;img src="image/top_bar2.png" style="width:760px;height:60px;position:absolute;top:9px;left:9px;z-index:inherit;"&gt;
           &lt;img src="image/bottomMenu_bar.png" style="width:760px;height:45px;position:absolute;top:489px;left:9px;z-index:inherit;"&gt;
        &lt;div class="big-player" width="500" height="250" style="width:500px;height:250px;overflow:hidden;position:absolute;top:106px;left:134px;z-index:200;"&gt;
          &lt;video width="500" height="250" id="player2" preload="auto"&gt;
              &lt;source type="video/mp4" src="http://localhost/HTML5/video/big_buck_bunny.mp4" /&gt;
                  &lt;object width="500" height="250" type="application/x-shockwave-flash" data="js/flashmediaelement.swf"&gt;
                      &lt;param name="movie" value="js/flashmediaelement.swf" /&gt;
                      &lt;param name="flashvars" value="controls=true&amp;amp;file=http://localhost/HTML5/video/big_buck_bunny.mp4" /&gt;
                 &lt;/object&gt;
          &lt;/video&gt;    
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and here is the script I have so far:</p>
  
  <pre><code>    var videoplayer;
      var playCount = 0;
      $('video').mediaelementplayer({
      features: ['playpause', 'progress'],
      success: function (mediaElement, domObject, player) {
          videoplayer = player;
          $('.mejs-overlay-button').hide();
          $('.mutebutton').show();
           mediaElement.play();
           player.setMuted(true);
          //show poster image once the video stops and video restarts
          mediaElement.addEventListener('ended', function () {
              $('.image-end').show(); 
              playCount++;
              if(playCount&gt;=3){
                  player.pause();
              }
  
          },false); //end ended function
      }//close success
  });//close mediaelementplayer
  
  $('#background').each(function(){
      $(this).width($(this).width() * 0.5);
  });
  
  $('#background').mouseover(function() {
      videoplayer.setMuted(false);
       $("#background").animate({
          width:"100%",
      }, 1500 );
  });
  </code></pre>