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"
   });
}

As of [video.js version 4.3](http://blog.videojs.com/post/66138384272/video-js-version-4-3-0-released-w-shiny-new-api-docs) you can simply add the `vjs-big-play-centered` class to the video element. With earlier 4.x versions you can use `.vjs-big-play-button { left: 50%; top: 50% }` — misterben, Nov 19 '13 at 13:26
This isn't a question, really. You could rewrite it and ask how to center the button, then answer it. Or ask @misterben to answer. — slhck, Apr 20 '14 at 15:43
Duplicate: http://stackoverflow.com/questions/18426487/howto-place-the-start-button-in-the-middle-of-the-clip — steel, Nov 17 '14 at 20:50

score 102 · Answer 1 · edited Jan 28 '20 at 12:13

102

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;

edited Jan 28 '20 at 12:13

Shashank Agrawal

25,161
11
89
121

answered Oct 02 '14 at 02:24

Adrian P.

5,060
2
46
47

1

Indeed the link is dead due to videojs.com. You can play here: http://codepen.io/heff/pen/EarCt – Adrian P. Apr 27 '16 at 18:36

score 1 · Answer 2 · answered Apr 25 '16 at 16:20

1

Create video-js-custom.css place after:

<link href="http://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet">
<link href="link-to-custom-css/video-js-custom.css" rel="stylesheet">

Add of video-js-custom.css:

.video-js .vjs-big-play-button {
    left: 40% !important;
    top: 40% !important;
    width: 20%;
    height: 20%;
}

.video-js .vjs-play-control:before {
    top:20% !important;
    content: '\f101';
    font-size: 48px;
}

answered Apr 25 '16 at 16:20

Dũng IT

2,751
30
29

the box is positioned in the middle but the play icon not scaled down well – Jakob Alexander Eichler Nov 09 '17 at 20:11

score 1 · Answer 3 · edited Feb 19 '20 at 13:55

In all the devices (Mobiles and PC) you can center align play-button using below css style

.vjs-default-skin .vjs-big-play-button {
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%);
            width: 80px!important;
            height: 80px!important;
            -webkit-border-radius: 0.8em!important;
            -moz-border-radius: 0.8em!important;
            border-radius: 1.9em!important;
        }

score 1 · Answer 4 · answered May 04 '20 at 04:49

As of version "video.js": "^7.7.5" following config works for me: class vjs-big-play-centered centers the button on player.

Stylesheet

 <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />
  <!-- City -->
  <link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet">

HTML

<video
  id="my-video"
  class="video-js vjs-theme-city vjs-big-play-centered"
  controls
  playsinline
  preload="auto"
  width="640"
  height="480"
  data-setup="{}"
>
  <source src="{{this.url}}" type="application/x-mpegURL"/>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank"
    >supports HTML5 video</a
    >
  </p>
</video>

score 1 · Answer 5 · answered Jan 07 '21 at 15:18

Javascript version (based on @Adrian's answer):

<video id="my_video"
    class="video-js vjs-default-skin vjs-big-play-centered"
    width="640" height="360"...></video>

React version:

import { Player, BigPlayButton } from 'video-react'
const MyComponent = () => {
  return (
    <Player className="video-video" >
      <source src={"/video.mp4"} />
      <BigPlayButton position={"center"} />
    </Player>);
}

score 0 · Answer 6 · answered Apr 23 '15 at 09:03

0

Easy way:

http://designer.videojs.com - at the bottom of the less just add:

.vjs-default-skin .vjs-big-play-button {
  margin-left: -@big-play-width/2;
  margin-top: -@big-play-height/2;
  left: 50%;
  top: 50%;
}

answered Apr 23 '15 at 09:03

Chris Beck

118
7

score 0 · Answer 7 · answered Mar 24 '17 at 03:02

0

Add a custom CSS to your code

.vjs-big-play-button {
    margin-top: 20%;
    margin-left: 40%;
    width: 70px !important;
    height: 70px !important;
}

Adjust width and height accordingly.

answered Mar 24 '17 at 03:02

Kapil

11
1

score 0 · Answer 8 · answered Aug 29 '17 at 15:10

I use "limelight player" that uses video.js to deliver HTML5 solution but I have problem to center play button icon in iOS devices. Reported issue and support could not come with solution. They did confirm issue. I thought of sharing my solution that might help somebody. Solution was simple: decrease font size! Besides the "font-size" there is inherited "line-height" property that might need adjustment too. These two properties increase parent container and misalignment happens if parent container is not set to be relative or video player container is set to be responsive (width:100% ; height:100%)

So CSS solution that helped me was:

.video-js .vjs-limelight-big-play{ 
      font-size:100px!important /*or less */
}

Or even better switch from PX to EM which will help in mobile devices (iOS experienced issue with centering of a play button too)

.video-js .vjs-limelight-big-play{ 
      font-size:10em!important /*or less depending on your design*/
}

VideoJS centered play button

8 Answers8