Play button vertical alignment in Safari

  • Resolved Jaiji

    (@jaiji)


    10 months, 1 week ago

    I’ve just noticed that the play button doesn’t vertically align as intended in Safari (15.6.1), it sits at the top of the video block, horizontally centered. This is occurring on several sites I manage.

    For now I’ve just modified the CSS to this, which appears to work (though I’ve not applied it to the page I’ve linked to, so you can see the issue):

    .hd-bcve-wrapper .play-button {
    top: calc( 50% - ( 0.5 * var(--hd-play-button-size) ));
    }

    It seems Safari may be struggling with the calc.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Mark Wilkinson

    (@wpmarkuk)

    Hi Jaiji,

    Thanks for reporting the issue.

    On Inspection I can see that the current version of Safari is 17.2 and therefore the version you mentioned is very outdated.

    Therefore this is not something we are going to fix in the plugin. As you have mentioned yourself, you could offer a fix in your own CSS for this.

    Kind regards,
    Mark

    Thread Starter Jaiji

    (@jaiji)

    Fair enough, I’m running an old MBP which can only go as far as Catalina, making Safari 15.6.1 the newest version I can use.

    While I’m here, it would be good to have a smaller play button on mobiles, say at under 768px width. I’m currently adjusting that with CSS too, I just thought it could be an easy addition to the plugin CSS.

    Plugin Contributor Mark Wilkinson

    (@wpmarkuk)

    Hi Jaiji,

    I think adding your own CSS for these use-cases is the best way forward. Everyone’s sites are going to be different at the end of the day.

    Thread Starter Jaiji

    (@jaiji)

    OK, no problem.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Play button vertical alignment in Safari’ is closed to new replies.