Centering the Big Ass Play Button in VideoJS

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