Changing the video Play button in RISE 360

Jun 22, 2021

Well, I've looked everywhere but can't see how to change the video Play button in RISE 360.

The default button is a big black circle that monopolizes the image and looks hideous if there's a centrally-placed presenter. I just want to change the size/color/image to tone it down a bit.

I can play with the style sheets and get heading colors (etc) to change but can't locate the definitions for the Play button.  There's a CSS property called .vjs-big-play-button but changing it doesn't seem to change anything.

Can anyone help?

7 Replies
Renz Sevilla

Hi Steve! There isn't a way within Rise to modify the play button overlay that appears before you play a video. That being said, I'll let the team know about your feedback. 

I see you were looking to adjust some CSS properties. Though we don't support custom scripting or modification of published content, the community may have a creative solution for you to achieve what you need!

Steve Warren

Thank you Renz

Yes, I'm hoping the community can help here because the play button is a real problem on some of the videos I've tried out.

The answer is to find the property within the CSS and overwrite it in a separate style sheet. I'm having good success with the changes I've made to headings, etc (just font size and color) but this is baffling me.

As I say, there's a CSS property called .vjs-big-play-button but changing its size or color properties doesn't seem to change anything. It would be nice to substitute the default play button with an image but I guess that's a step too far ,,,

Phil Foss

I'm using this css to make the button a bit smaller. You can add css in web or scorm exports. What I do is make a new folder called theme and add css and image files in there, then you need to add the link in the main/index file.

.video-a11y .vjs-big-play-button {
width: 45px !important;
height: 45px !important;
border:0px none !important;

.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
line-height: 1.1;


edit index file

custom Rise theme