Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ghost opened this issue Aug 22, 2023 · 2 comments
Open

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

ghost opened this issue Aug 22, 2023 · 2 comments

Comments

@ghost
Copy link

ghost commented Aug 22, 2023

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

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

The way it is now:
image

After changing height to match line-height:
image

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
Copy link

welcome bot commented Aug 22, 2023

👋 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
Copy link
Contributor

amtins commented Aug 23, 2023

@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;
        }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant