Any way to display video controls all the time (not auto-hide) and BELOW the video, not overlapping it?

Here is a JavaScript code snippet that ensures video controls are always displayed

const el = document.querySelector(".video-animation-container");

if (el) {
    el.classList.remove("controls-hidden");
    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.type === "attributes" && mutation.attributeName === "class") {
                if (el.classList.contains("controls-hidden")) {
                    el.classList.remove("controls-hidden");
                }
            }
        }
    });

    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
}