Force HTML video controls on Instagram Reels

Instagram-force-video-controls.user.js

// ==UserScript==
// @name         Instagram Force Video Controls (No Overlay)
// @namespace    https://github.com/nileane
// @version      1.0
// @description  Force-enable HTML controls on all Instagram videos and remove overlay UI
// @author       Niléane
// @match        https://www.instagram.com/*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function enableControls(video) {
        if (!video.hasAttribute('controls')) {
            video.setAttribute('controls', 'true');
            video.controls = true;
        }

        // Remove the overlay <div> right after the video
        const next = video.nextElementSibling;
        if (next && next.tagName === 'DIV') {
            next.remove();
        }
    }

    // Initial run
    document.querySelectorAll('video').forEach(enableControls);

    // Observe dynamically added videos
    const observer = new MutationObserver(mutations => {
        for (const mutation of mutations) {
            mutation.addedNodes.forEach(node => {
                if (node.tagName === 'VIDEO') {
                    enableControls(node);
                } else if (node.querySelectorAll) {
                    node.querySelectorAll('video').forEach(enableControls);
                }
            });
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();