GIF Animation Preview - Fix to make GIF responsive - https://wordpress.org/support/topic/once-the-page-is-loaded-the-size-of-the-image-is-not-responsive

gapplayer.min.js

(function(c) {
    function d(a, b) {
        this.previewElement = a;
        this.spinnerElement = c("<div class='spinner'></div>");
        this.options = b;
        this.gifLoaded = !1
    }
    d.prototype = {
        activate: function() {
            this.wrap();
            this.addSpinner();
            this.addControl();
            this.addEvents();
            this.options.autoLoad && (this.playElement.hide(), this.spinnerElement.show(), this.loadGif());
            this.options.preLoad && ((new Image).src = this.getGifSrc())
        },
        wrap: function() {
            this.wrapper = this.previewElement.wrap("<div class='gapplayer-wrapper'></div>").parent();
            this.wrapper.css("width", "100%");
            this.wrapper.css("height", "auto");
            this.previewElement.addClass("gapplayer");
            this.previewElement.css("cursor", "pointer")
        },
        getGifSrc: function() {
            return this.previewElement.attr("data-gif") ? this.previewElement.attr("data-gif") : this.previewElement.attr("src").replace(/\.[^/.]+$/, ".gif")
        },
        addControl: function() {
            this.playElement = c("<ins class='play-gif'><span>" + this.options.label + "</span></ins>");
            //this.playElement.css("left", this.previewElement.width() / 2 + this.playElement.width() / 2);
            this.wrapper.append(this.playElement)
        },
        addEvents: function() {
            var a = this.options.hover ? "mouseenter" : "click",
                b = this;
            b.playElement.on(a, function(a) {
                c(this).hide();
                b.spinnerElement.show();
                b.loadGif();
                a.preventDefault();
                a.stopPropagation()
            });
            b.previewElement.on(a, function(a) {
                b.playElement.is(":visible") && (b.playElement.hide(), b.spinnerElement.show(), b.loadGif());
                a.preventDefault();
                a.stopPropagation()
            });
            b.spinnerElement.on(a, function(a) {
                a.preventDefault();
                a.stopPropagation()
            })
        },
        loadGif: function() {
            this.gifLoaded || this.enableAbort();
            var a = this,
                b = a.options.hover ? "mouseleave" : "click",
                d = this.getGifSrc(),
                e = this.previewElement.width(),
                f = this.previewElement.height();
            a.gifElement = c("<img src='" + d + "' width='" + e + "' height=' " + f + " '/>");
            this.gifElement.load(function() {
                a.gifLoaded = !0;
                a.resetEvents();
                c(this).css({
                    position: "absolute",
                    top: "0",
                    left: "0"
                });
                a.options.effect ? (a.gifElement.hide(), a.spinnerElement.hide(), a.wrapper.append(a.gifElement), a.gifElement.stop(!0).fadeIn(function() {
                    // a.previewElement.hide()
                })) : (/* a.previewElement.hide(), */ a.wrapper.append(a.gifElement), a.spinnerElement.hide());
                if (!a.options.autoLoad) c(this).on(b, function(b) {
                    a.options.effect ? (a.previewElement.show(), a.playElement.show(), c(this).stop(!0).fadeOut()) : (c(this).remove(), a.previewElement.show(), a.playElement.show());
                    b.preventDefault();
                    b.stopPropagation()
                })
            })
        },
        enableAbort: function() {
            var a = this;
            this.previewElement.click(function(b) {
                a.abortLoading(b)
            });
            this.spinnerElement.click(function(b) {
                a.abortLoading(b)
            })
        },
        abortLoading: function(a) {
            this.spinnerElement.hide();
            this.playElement.show();
            a.preventDefault();
            a.stopPropagation();
            this.gifElement.off("load").on("load", function(a) {
                a.preventDefault();
                a.stopPropagation()
            });
            this.resetEvents()
        },
        resetEvents: function() {
            this.previewElement.off("click");
            this.playElement.off("click");
            this.spinnerElement.off("click");
            this.addEvents()
        },
        addSpinner: function() {
            this.wrapper.append(this.spinnerElement);
            this.spinnerElement.hide()
        }
    };
    c.fn.gapPlayer = function(a) {
        return this.each(function() {
            a = c.extend({}, c.fn.gapPlayer.defaults, a);
            (new d(c(this), a)).activate()
        })
    };
    c.fn.gapPlayer.defaults = {
        label: "gif",
        autoLoad: !1,
        preLoad: !1,
        effect: !1,
        hover: !1
    };
    gapStart()
})(jQuery);

function gapStart() {
    "yes" == gapParams.metadata && jQuery('img[src$="-gap.jpg"]:not([data-gif]):not(.gapplayer),img[src*="-gap.jpg?"]:not([data-gif]):not(.gapplayer)').each(function() {
        var c = jQuery(this).attr("src");
        jQuery(this).attr("data-gif", c.substring(0, c.length - 8) + ".gif")
    });
    var c = jQuery('img[src$="-gap.jpg"]:not(.gapplayer),img[src*="-gap.jpg?"]:not(.gapplayer)');
    c.imagesLoaded(function() {
        c.gapPlayer({
            autoLoad: "yes" == gapParams.autoLoad,
            preLoad: "no" == gapParams.preLoad,
            effect: "yes" == gapParams.effect,
            hover: "yes" == gapParams.hover
        })
    })
};