How to remove a large play button at the end of video playback (VideoJS)

Question

I posted this on the VideoJS forums, but haven’t received an answer yet, I was hoping I could help here. :)

I am trying to remove the “big play button” that appears as soon as the video finishes playing in js video.

I tried numerous skins / shows, but didn't seem to be able to disappear at the end. I got it to hide first, just changing css, but I did not find anything for the end. I use the latest version of Video JS, so the old fixes that I found do not work.

Please, help. Thank you in advance!

Answer 1

The CSS answer is best, although you can better hide it in your stylesheet so that you can easily upgrade to later versions of Video.js. That should do it.

.video-js.vjs-default-skin .vjs-big-play-button { display: none; } 

You can also remove the line that includes the bigPlayButton component, but this will really prevent an easy upgrade.

https://github.com/zencoder/video-js/blob/master/src/core.js#L69

Answer 2

Just delete / change CSS, it's there. This is line 328 to 360 in js.css video

https://github.com/zencoder/video-js/blob/master/design/video-js.css

Answer 3

Their javascript adds a class on id to show that the video has finished the game. Add the following css line:

 .vjs-paused .vjs-big-play-button { display: none; }