Turn That Light Off

P.S. Given Dave has quite a distinctive voice, I thought it best to include closed captions. But I wanted to move the captions so they didn't block the question. 

To achieve this, I used the following Javascript:

// Function to detect if the device is mobile
function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

const addCss = css => {
    const style = document.createElement("style");
    style.innerHTML = css;
    document.head.appendChild(style);
};

// Replace X and Y with your desired coordinates in percentage
const xPercent = 33; // Example: 50% from the left of the player
const yPercent = 80; // Example: 90% from the top of the player

// Only apply the custom positioning if not on a mobile device
if (!isMobile()) {
    addCss(`
        /* Ensure the player container has relative positioning */
        .player-container {
            position: relative !important;
        }

        .view-desktop .caption-container, .theme-unified .caption-container {
            position: absolute !important; /* Absolute positioning relative to the player container */
            top: ${yPercent}% !important; /* Y-coordinate */
            left: ${xPercent}% !important; /* X-coordinate */
            transform: translate(-50%, 0%) !important; /* Adjust the Y-axis translation to align properly */
            width: auto !important; /* Ensure width is adjusted if needed */
            z-index: 1000 !important; /* Ensure it's above other elements */
        }

        .view-desktop .caption, .theme-unified .caption {
            width: 100% !important; /* Full width within the container */
            position: relative !important; /* Relative to the container */
            top: 0 !important; /* Adjust top if needed */
            left: 0 !important; /* Adjust left if needed */
            transform: none !important; /* Remove any transform applied */
        }
    `);
    console.log(`Captions positioned at ${xPercent}% horizontally, ${yPercent}% vertically.`);
}

But this isn't reliable on mobile devices, so the same code also first checks if the course is running on a phone or tablet, and doesn't run in that case.

On a desktop, having the captions appear directly underneath the character's mouth makes the layout much cleaner.

Well done! And thanks for sharing your methodology and code! 🙂

LOL! I had to look up Blackpool Illuminations. Thank you for the CCs because I thought I was mishearing what he was saying.  I never would have thought of animating the script like that. Thanks for posting about your method.