Play button vertical alignment in Safari

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]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer