I used to love how the play button was centered and then somewhere along the line it started appearing in the upper left corner which is odd looking.

I fiixed this with the following css.

div.vjs-default-skin button.vjs-big-play-button {
	top: 50%;
	left: 50%;
	margin-left: -1.5em;
	margin-top: -.75em;
}

The margins are exactly 50% of the width and height set in video-js.css:

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.5em;
  width: 3em;
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  border-radius: 0.3em;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s; }

Comments

bkat created an issue. See original summary.

Jorrit’s picture

Status: Active » Fixed

Thanks for sharing! I am going to close this, however, to keep the issue queue clean.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.