VideoJS centered play button

Question

I thought I'd share a piece of code that might come in handy to someone. This is a function that center's the play button inside the video-js player, it works for me. You just need to call it on the pause event and when the player is initialized and not being autoplayed.

Enjoy!

function CenterPlayBT() {
   var playBT = $(".vjs-big-play-button");
   playBT.css({
      left:( (playBT.parent().outerWidth()-playBT.outerWidth())/2 )+"px",
      top:( (playBT.parent().outerHeight()-playBT.outerHeight())/2 )+"px"
   });
}

Answer 1

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;