Lorenzo Massa Lorenzo Massa - 4 months ago 11
jQuery Question

How to resize video when video starts/stops?

I think I have the right code to make a video bigger when it starts playing and smaller when it pauses.

$(document).ready(function(){
if ($("section video").get(0).pause || $("section video").get(0).ended) {
$("section video").click(function() {
$("section video").animate({ width: "100%" }, 'slow')
$("section video").queue(function(){
$("section video").get(0).play();
});
});
$("section video").animate({ width: "50%" }, 'slow')
}
else if ($("section video").get(0).play) {
$("section video").click(function(){
$("section video").animate({ width: "50%" }, 'slow')
$("section video").queue(function(){
$("section video").get(0).pause();
});
});
}
});


However, it works when I click on it and it starts. But when I click on it again with the 'play' condition nothing happens. Can someone help me?

Answer

There's a typo, it's paused and as far as I know there's no property for videos for getting the playing status.

Try with this code:

jQuery(document).ready(function($) {
    var video = $('section video').get(0);

    video.onended = function(e) {
      $('section video').animate({ width: "50%" }, 'slow');
    }

    $('section video').click(function() {
        if(this.paused || this.ended){
           $('section video').animate({ width: "100%" }, 'slow');
           video.play();
        } else{
          $('section video').animate({ width: "50%" });
          video.pause();
        }
    });
});