.vjs-big-play-button vertically off-center

[ghost]

The line-height property should be the same as height to center the play button.

video.js/src/css/components/_big-play.scss

Lines 5 to 6 in b95cd7a

	line-height: $big-play-button--line-height;
	height: $big-play-button--height;

The way it is now:

After changing height to match line-height:

As you can see the first one is slightly off-center, while the second one is ok.

I want to mention that I have only changed the sizes manually in the .css file (both to 1.5em) and haven't actually tried changing the linked .scss file so I do not know if changing it has any implications.

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[amtins]

@reggiedotre thanks for the issue. I've created a PR to make it easier to customize the big-play-button. However, my proposal has a high risk of breaking a lot of integration based on current css rules, following discussions I had with @mister-ben and @misteroneill.

That's why I'm going to close it in the next few days and include it in another PR to try and offer a new development experience for player customization in the next few weeks or months (?).

In the meantime, you can do the following:

        .video-js .vjs-big-play-button {
            line-height: inherit;
            /* height: 3em; */ /* you can set a new height */

            margin-top: unset;
            margin-left: unset;
            transform: translate(-50%, -50%); 
        }
        .video-js .vjs-big-play-button .vjs-icon-placeholder::before {
            position: inherit;
            top: unset;
            left: unset;
            display: flex;
            justify-content: center;
            align-items: center;
        }