Feature Request & Workaround: Prevent the Rise Video Control Bar from Clipping Lower Video Content

Hi everyone,

When using the Video block in Articulate Rise 360, the player control bar (.ov-control-bar) overlays the bottom portion of the video frame whenever a learner hovers over the player or navigates controls via keyboard. Even with slight transparency, this creates both an accessibility barrier and a usability friction point—especially for screen recordings, software demos, and videos with lower-third graphics or burned-in text.

Why This Matters (Accessibility, WCAG & Learning Flow)

• WCAG 1.4.11 Non-text Contrast & 1.4.3 Contrast (Minimum): A semi-transparent overlay bar sitting over active video visuals reduces contrast for both the player controls and the underlying video content, making UI elements, captions, or lower-third details harder to read.
• WCAG 2.4.7 Focus Visible & 2.4.11 Focus Not Obscured (Minimum): Learners navigating with a keyboard or assistive technology rely on visible controls. When the control bar stays active during keyboard focus, it persistently obscures the bottom edge of the video frame.
• Cognitive Load & Disrupted Flow: Learners trying to read clipped content at the bottom of a video often resort to repeatedly pausing, moving their cursor off the player, waiting for the bar to fade out, or toggling fullscreen on and off. This interrupts focus and adds unnecessary friction to the learning experience.

Suggested Product Improvements for Articulate

1. Make dynamic video scaling the default behaviour: When the control bar appears on hover or focus, smoothly scale the <video> element's height (object-fit: contain) to fit the space above the control bar, then restore it to 100% once the bar auto-hides.
2. Add a Video Block Setting: Under the Video block's Settings tab, provide a toggle for control bar behaviour—such as Overlay video (default) vs. Scale video when controls are active / Dock below video.

Workaround for Fellow Authors (Tested CSS Solution)

Until a native setting is available, you can resolve this globally across all videos in an exported Rise course using a lightweight CSS snippet.

Rather than permanently docking the bar (which triggers the player's ResizeObserver and collapses buttons into the ... overflow menu), this CSS smoothly scales the video down inside its container only while the control bar is active, then waits 1250ms after pointer exit so it expands back in sync with the fading bar:

<style id="ov-dynamic-video-scale">
  /* Keep the player background black so letterboxing blends seamlessly */
  div:has(> .ov-control-bar) {
    background-color: #000 !important;
    overflow: hidden !important;
  }

  /* Default state: Wait 1250ms before expanding back to 100% */
  div:has(> .ov-control-bar) video {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    transition: height 250ms ease 1250ms !important;
  }

  /* Active state: Scale down immediately (0ms delay) on hover or keyboard focus */
  div:has(> .ov-control-bar):hover:not(:fullscreen):not(:-webkit-full-screen) video,
  div:has(> .ov-control-bar):has(:focus-visible):not(:fullscreen):not(:-webkit-full-screen) video {
    height: calc(100% - 48px) !important;
    transition: height 250ms ease 0ms !important;
  }
</style>

Use code with caution.

How to Implement This in Your Course

Because Rise runs as a single-page application, you only need to add this code once and it will apply automatically to every video block in your project:

1. Export your course from Rise 360 for Web or LMS (SCORM / xAPI / cmi5) and extract the .zip archive.
2. Locate index.html:
   • For Web exports, open index.html in the root folder.
   • For LMS exports, open scormcontent/index.html.
3. Insert the CSS: Open index.html in a code or plain-text editor (e.g., VS Code or Notepad++), paste the <style> block above right before the closing </head> tag, and save the file.
4. Re-zip and upload: Select all files and folders inside the extracted directory (ensuring index.html or imsmanifest.xml sits at the root of the new zip) and compress them into a .zip file for your LMS or web server.

(Tip: If you use a browser extension like Mighty for Rise, you can also drop the CSS rules directly into your custom CSS settings so they bundle automatically on every export.)

There is an update to the code in the reply below.