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.
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!
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 ,,,
Any update on this? We are also having the same challenge and would love a way to change the Play button. It's completely blocking our video when paused and some users might like to pause the video and spend a few extra moments in certain areas
I'd like to add my thoughts here as well, the big play button doesn't look great on the thumbnail of a video, which usually you spend some time creating nicely. Would also welcome a style change.
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.
7 Replies
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!
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 ,,,
Any update on this? We are also having the same challenge and would love a way to change the Play button. It's completely blocking our video when paused and some users might like to pause the video and spend a few extra moments in certain areas
Hi there, Amy. Thanks for sharing how the play button blocks the video content when learners pause to view that frame -- it's helpful context.
There isn't an update about changing that button style right now, but we'll let you know if that changes.
I'd like to add my thoughts here as well, the big play button doesn't look great on the thumbnail of a video, which usually you spend some time creating nicely. Would also welcome a style change.
+1
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;
}