VideoJS centered play button

Question

You can try to play at videojs.com or as @misterben said above:

Simply add the vjs-big-play-centered class to the video element.

<video id="my_video"
    class="video-js vjs-default-skin vjs-big-play-centered"
    width="640" height="360"...></video>

Playground: https://codepen.io/heff/pen/EarCt

For SCSS version you may use

$center-big-play-button: true;

Create video-js-custom.css place after:

<link href="http://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet">
<link href="link-to-custom-css/video-js-custom.css" rel="stylesheet">

Add of video-js-custom.css:

.video-js .vjs-big-play-button {
    left: 40% !important;
    top: 40% !important;
    width: 20%;
    height: 20%;
}

.video-js .vjs-play-control:before {
    top:20% !important;
    content: '\f101';
    font-size: 48px;
}

In all the devices (Mobiles and PC) you can center align play-button using below css style

.vjs-default-skin .vjs-big-play-button {
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%);
            width: 80px!important;
            height: 80px!important;
            -webkit-border-radius: 0.8em!important;
            -moz-border-radius: 0.8em!important;
            border-radius: 1.9em!important;
        }

As of version "video.js": "^7.7.5" following config works for me: class vjs-big-play-centered centers the button on player.

Stylesheet

 <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />
  <!-- City -->
  <link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet">

HTML

<video
  id="my-video"
  class="video-js vjs-theme-city vjs-big-play-centered"
  controls
  playsinline
  preload="auto"
  width="640"
  height="480"
  data-setup="{}"
>
  <source src="{{this.url}}" type="application/x-mpegURL"/>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank"
    >supports HTML5 video</a
    >
  </p>
</video>

• Javascript version (based on @Adrian's answer):

<video id="my_video"
    class="video-js vjs-default-skin vjs-big-play-centered"
    width="640" height="360"...></video>

• React version:

import { Player, BigPlayButton } from 'video-react'
const MyComponent = () => {
  return (
    <Player className="video-video" >
      <source src={"/video.mp4"} />
      <BigPlayButton position={"center"} />
    </Player>);
}