Responsive

[mrjondahl]

Hi, is there anyway that the element width its set to 100% and the height to auto, instead of exact pixels? it works on tablets and mobile if i insert the img inside a responsive div, but if i resize the browser the img wont resize!

Besides that this worked 10 points!!!

[vslice11]

same problem here I tried with .resize() but it's not working, hope he can fix this.

[dkleissa]

+1. Responsive capability would be awesome.

[fmedinac]

Remove lines 33 and 34 of jquery.gifplayer.js inside wrap function, so container will keep default width and height, then you can control the images inside it on your CSS. FROM:

        wrap: function(){
            this.previewElement.addClass('gifplayer-ready');
            this.wrapper = this.previewElement.wrap("<div class='gifplayer-wrapper'></div>").parent();
            this.wrapper.css('width', this.previewElement.width());
            this.wrapper.css('height', this.previewElement.height());
            this.previewElement.css('cursor','pointer');
        },

TO:

        wrap: function(){
            this.previewElement.addClass('gifplayer-ready');
            this.wrapper = this.previewElement.wrap("<div class='gifplayer-wrapper'></div>").parent();
            this.previewElement.css('cursor','pointer');
        },

[arifje]

@fmedinac doesn't work here, after clicking play the gif disappears/collapses

[quantumass]

I solve it ~(˘▾˘~) (~˘▾˘)~ \ (•◡•) / notice that if you re-size the browser and reload the page it will perfectly fit because the creator of this plugin knows what he is doing so just add re-size event inside jquery like that :

$(window).resize(function(){ //if the browser resized $('.gif').gifplayer('stop');//first stop the playing gifs,videos $('.gif,.gif *').unbind().removeData();//remove all the things added by the plugin $(".gif").unwrap();//remove the parent class (this parent is the source of the problem) $( ".play-gif" ).remove();//remove the play button $(".gif").css("display","block");//for the videos $( ".gp-video-element" ).remove();//for the videos $('.gif').gifplayer();//reattach the plugin (don't worry it is fast ) });

this will work as magic

[alekseykorzun]

The above code is not very optimal and will lag under certain conditions. I took a different approach:

  $('.gifplayer').gifplayer();

  $(window).resize(function(){
    var player = $('.gifplayer'),
      control = $('.play-gif');

    if (player.length && control.length) {
      player.css('top', player.height()/2 - control.height()/2);
      player.css('left', player.width()/2 - control.width()/2);
    }
  });