Forum Discussion

DavidBarshes's avatar
DavidBarshes
Community Member
3 years ago

How to set video controls to always show?

Hi there, Someone on our team who specializes in WCAG Accessibility just noticed that the latest update of Storyline 360 (v3.66.28270.0) does not allow controls for inserted videos to 'always show' ...
accessibility
storyline 360
Bottleneck121's avatar
Bottleneck121
Community Member
2 months ago

You're right—Storyline 360’s Modern Player currently requires users to hover to see video controls, which can be an accessibility issue. A possible workaround is to add custom video controls outside the video frame using Storyline’s buttons and triggers (e.g., play, pause, seek bar). Another option is embedding the video in a web object where you can control the player behavior. You might also consider submitting feedback to Articulate to request this as an accessibility improvement in future updates.

Nedim's avatar
Nedim
Community Member
2 months ago

A workaround that works for me involves using JavaScript. Execute the JavaScript when the timeline starts.

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

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

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

Result:

Related Content