Make google recaptcha v2 responsive. ...sort of

recap_sizer.js

/**
 Still an IIFE, so it's still a drop-in; but this version accounts for a lot more edge cases and portability issues.
 */
(function (breakpoint, horizontalOffset, period) {
    // var breakpoint = 500;
    // var horizontalOffset = "-5rem";
    var isOffset = false;
    var hasNatural = false;
    var horizontalNatural = {left: 0, right: 0};
    var frames, jotscriptwrapper;
    var recap_respond = function () {
        if (window.innerWidth > breakpoint) {
            jotscriptwrapper.style.marginLeft = horizontalNatural.left;
            jotscriptwrapper.style.marginRight = horizontalNatural.right;
            isOffset = false;
            return;
        }
        //-- scale iframes
        frames = document.querySelectorAll('iframe[src*="recaptcha/api2/bframe"]');
        frames.forEach(function (e, i) {
            scale_down(e.parentNode, 0.6);
        });

        //-- negmargin form container
        try {
            jotscriptwrapper = document.querySelector('#g-main script[src*="form.jotformpro.com"]').parentNode;
            if (!hasNatural) {
                horizontalNatural = {
                    left: jotscriptwrapper.style.marginLeft,
                    right: jotscriptwrapper.style.marginRight,
                }
                hasNatural = true;
            }
            jotscriptwrapper.style.marginLeft = horizontalOffset;
            jotscriptwrapper.style.marginRight = horizontalOffset;
            isOffset = true;
        }
        catch (error) {
        }
    }
    var scale_down = function (el, factor) {
        el.style.transform = "scale3d(" + factor + "," + factor + ",1)";
        el.style.transformOrigin = "left center";
    };
    window.setInterval(recap_respond, period);
})(500, "-5rem", 450)

Scales google recaptcha challenge window on mobile devices.

Install: It's an IIFE, so really drop it on any page that needs a smaller recap challenge.