Video JS has the play button placed in the top left of the video
- we can edit the CSS to center the position
Changing the CSS
The class selector to target is the .vjs-default-skin .vjs-big-play-button, I find using a % value retains the position for most of the size when scaled
.vjs-default-skin .vjs-big-play-button {
left: 40%;
top: 40%;
width: 20%;
height: 20%;}
Adding in a CSS media querie for smaller size viewports
To tackle smaller size viewing areas, create some media queries to center the button - adjust to suit!
@media only screen and (max-width:599px) {
.vjs-default-skin .vjs-big-play-button {left:25%;top:25%;width:50%;height:50%;}
}
@media only screen and (min-width:600px) and (max-width:768px) {
.vjs-default-skin .vjs-big-play-button {left:25%;top:25%;width:50%;height:50%;font-size:5em;}
}
comments powered by Disqus