Video.js: Make the player button in center by default

[paladox]

Hi could the play button be moved to the center of the player by default. or how can I do this in this patch https://gerrit.wikimedia.org/r/#/c/212981/

[mmcc]

To center the big play button add the class vjs-big-play-centered to the video element.

[paladox]

Hi how can I do that since this is different in how it is implanted.

[mmcc]

I'm not following. Instead of a video element that looks like this:

<video id="my-player" class="video-js" ...>
  /* other sources */
</video>

You can center by adding the centered class like this:

<video id="my-player" class="video-js vjs-big-play-centered" ...>
  /* other sources */
</video>

[paladox]

Well because it is registered through a custom js file to let videojs work with timedmediahandler it is not done through a html file. I am not sure how to do it thorugh that patch.

[mmcc]

There's absolutely no magic here, it's just a CSS class and you could add that at any point in the pipeline. Somewhere along the way a video-js class gets added to an element, so you can just always add vjs-big-play-centered to that class list if that's the intended result.

[paladox]

Hi how would I do it through css like override that class but through css since doing it like that wont work on this extension timedmediahandler. It has been setup differently.

[mmcc]

If you can't add a class to your player with relative ease (or update DOM attributes in general), something is fundamentally broken and you should revisit the timedmediahandler extension.

That being said, you can just copy the styles from the .vjs-big-play-centered class over to the .vjs-big-play-button class.

[hartman]

@paladox don't bother mmcc with this please. 1st of all, we haven't decided if we need this to begin with, and 2nd of all, it's a simple CSS statement indeed. Just because we haven't created a Video.js specific RL module to do so doesn't mean it's impossible.

[paladox]

Ok sorry.