Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #2
Jorrit CreditAttribution: Jorrit at nCode for DOM Digital Online Media GmbH commentedThanks for sharing! I am going to close this, however, to keep the issue queue clean.