Forum Discussion
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' if using the Modern player (it *is* an option if using the Classic player).
If the learner has to hover the mouse over the video in order to show the video controls, this may be in conflict with Accessibility standards... Can someone please suggest any tips or work-arounds? Thanks in advance!
- JohnMorgan-c50cFormer Staff
Hi David!
As of now, there isn’t a way to set the accessible video controls to remain visible without the user hovering or tabbing to one of the options. Good news though! There is a work around! This conversation will give you the steps other users have implemented to get around this issue. You're also welcome to submit a feature request directly to our team with your suggestion to resolve this issue.
Thanks for reaching out!
- BillDaneCommunity Member
Sorry, John, but that conversation you linked to has nothing to do with what David was asking for. He, like me, would like the video controls to always stay visible - to not fade away after a few seconds.
I'd also like to control which video controls are available. For instance, the PIP and playback speed options are not ideal for our audience.
- DavidBarshesCommunity Member
Thank you for your response, John! I have submitted a feature request.
- RayHandley-35f7Community Member
I second this, and it would be great to add a similar playbar functionality to audio files as well.
- JohnMorgan-c50cFormer Staff
Hi Ray,
As David mentioned above, he did open a feature request for this. I added your voice to the request. If the request makes it onto our feature roadmap, we’ll make sure to update you in this conversation!
Thanks for reaching out!
Thanks for sharing your thoughts with us, Bill. We appreciate it!
I've added your voice to the request. We'll be sure to update this forum thread with any news! In the meantime, you can see our Feature Roadmap for what we're currently working on.
Hope you have a great start to 2023!
- WeLearning-5561Community Member
hey
you need to make one change in the desktop.min file:
.controls-hidden{opacity:1} - JoshDarlingtonCommunity Member
Hi there, any updates on this? Nice to know that ".controls-hidden{opacity:1}" is available.... But, I work at a big org with a lot of people and don't want to pass off technical debt by hacking into the file structure.
I need to add a transcript for ADA and right now the built in transcript feature can only be accessed by adding the duplicate set of video accessibility controls. Huh? Of course, duplicate controls are confusing and look weird. But if I hide the normal controls (so I have one set of controls w the transcript option) then the one set of controls available are hidden by default. Not a fan of hidden controls from a UX perspective.Hi Josh,
Thanks for sharing what you want to see in Storyline's built-in video controls! I've added your thoughts to the existing feature request. It's not currently on our feature roadmap, but I'll be sure to update this discussion if our team decides to reroute.
- HVfb0f498d-053bCommunity Member
We don't use a lot of embedded video so I've never really noticed that the video controls only show when the user rolls over the video. But seems really odd that they are not on by default, with the option to hide.
- Bottleneck121Community Member
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.
- NedimCommunity Member
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: