Makes the webm player a little bit better on 4chan. Click video to pause/play. Scoll on playing video to change volume. Playing a video will pause an already playing video. More responsive to pausing a video that is out of view.

4chenenhancedwebmcontrols.user.js

// ==UserScript==
// @name            4chen Enhanced Webm Controls
// @description     Adds some new features to the webm player.
// @author          Josef A. (DrDoof)
// @namespace       https://gist.github.com/josefandersson/ec3d2826d20337d3fba21e893b83b181/raw/9f4c7affaf4628f2a15165a7cb3bb9ba62a309f3/4chenenhancedwebmcontrols.user.js
// @require         https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @include         http://*.4chan.org/*
// @include         https://*.4chan.org/*
// @grant           GM_addStyle
// @grant           GM_setValue
// @grant           GM_getValue
// @version         1.1.1
// @run-at          document-end
// ==/UserScript==

(() => {

    GM_addStyle('.expandedWebm { max-width: 95%; max-height: 95%; }');

    current = null;

    $.fn.is_on_screen = function(){
        var win = $(window);
        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();
        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();
        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    };

    $('.fileThumb').click((e) => {
        link = $(e.currentTarget);

        if (link[0].href.indexOf('webm') > -1) {
            e.preventDefault();
            e.stopImmediatePropagation();


            (vid = $('<video>', { controls: '', loop: '', autoplay: '', class: 'expandedWebm', src: link[0].href })).insertAfter(link);
            vid[0].volume = parseFloat(GM_getValue('vol') || '0.5');

            if (current != null) current.pause();
            current = vid[0];

            $('html, body').animate({
                scrollTop: vid.offset().top - 50
            }, 1000);

            link.hide();

            $('<span>', { class: 'collapseWebm', text: ' - [' })
            .append((close = $('<a>', { href: '#', text: 'Close' })))
            .append(']')
            .appendTo($(link[0].parentElement.children[0]))

            close.click((e) => {
                e.preventDefault();
                t = $(e.target);
                p = t.parents('.file');
                p.children('video').remove();
                p.children('a').show();
                t.parent().remove();
            });

            vid.click((e) => {
                if (current != e.target && current != null) current.pause();
                if (e.target.paused) { e.target.play(); current = e.target; }
                else                 { e.target.pause(); current = null; }
            });

            vid.on('wheel', vid, (e) => {
                if (!e.currentTarget.paused) {
                    e.preventDefault();
                    d = e.originalEvent.deltaY;
                    v = e.currentTarget.volume;
                    if (d > 0)      v -= 0.05;
                    else if (d < 0) v += 0.05;
                    e.currentTarget.volume = Math.min(Math.max(0, v), 1);
                }
            });

            vid.on('volumechange', (e) => {
                GM_setValue('vol', `${e.target.volume}`);
            });

            $(window).on('scroll', (e) => {
                if (current) {
                    c = $(current);
                    if (!c.is_on_screen()) {
                        current.pause();
                        current = null;
                    }
                }
            });
        }
    });
})();

alternative.user.js

// ==UserScript==
// @name            4chen Enhanced Webm Controls
// @description     Adds some new features to the webm player.
// @author          Josef A. (DrDoof)
// @namespace       https://gist.github.com/josefandersson/ec3d2826d20337d3fba21e893b83b181/raw/9f4c7affaf4628f2a15165a7cb3bb9ba62a309f3/4chenenhancedwebmcontrols.user.js
// @require         https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @include         http://*.4chan.org/*
// @include         https://*.4chan.org/*
// @grant           GM_addStyle
// @grant           GM_setValue
// @grant           GM_getValue
// @version         1.1.1_alt
// @run-at          document-end
// ==/UserScript==

(() => {

    GM_addStyle('.expandedWebm { max-width: 95%; max-height: 95%; }');

    current = null;

    $.fn.is_on_screen = function(){
        var win = $(window);
        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();
        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();
        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    };

    $('.fileThumb').click((e) => {
        link = $(e.currentTarget);

        if (link[0].href.indexOf('webm') > -1) {
            e.preventDefault();
            e.stopImmediatePropagation();


            (vid = $('<video>', { controls: '', loop: '', autoplay: '', class: 'expandedWebm', src: link[0].href })).insertAfter(link);
            // vid[0].volume = parseFloat(GM_getValue('vol') || '0.5');
            vid[0].volume = 0;

            if (current != null) current.pause();
            current = vid[0];

            $('html, body').animate({
                scrollTop: vid.offset().top - 50
            }, 1000);

            link.hide();

            $('<span>', { class: 'collapseWebm', text: ' - [' })
            .append((close = $('<a>', { href: '#', text: 'Close' })))
            .append(']')
            .appendTo($(link[0].parentElement.children[0]))

            close.click((e) => {
                e.preventDefault();
                t = $(e.target);
                p = t.parents('.file');
                p.children('video').remove();
                p.children('a').show();
                t.parent().remove();
            });

            vid.click((e) => {
                if (current != e.target && current != null) current.pause();
                if (e.target.paused) { e.target.play(); current = e.target; }
                else                 { e.target.pause(); current = null; }
            });

            vid.on('wheel', vid, (e) => {
                if (!e.currentTarget.paused) {
                    e.preventDefault();
                    d = e.originalEvent.deltaY;
                    v = e.currentTarget.volume;
                    if (d > 0)      v -= 0.05;
                    else if (d < 0) v += 0.05;
                    e.currentTarget.volume = Math.min(Math.max(0, v), 1);
                }
            });

            // vid.on('volumechange', (e) => {
            //     GM_setValue('vol', `${e.target.volume}`);
            // });

            $(window).on('scroll', (e) => {
                if (current) {
                    c = $(current);
                    if (!c.is_on_screen()) {
                        current.pause();
                        current = null;
                    }
                }
            });
        }
    });
})();