diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss
index 4e81900932..6fdd7fbdc6 100644
--- a/src/css/components/_big-play.scss
+++ b/src/css/components/_big-play.scss
@@ -1,8 +1,5 @@
-@use "sass:math";
-
 .video-js .vjs-big-play-button {
   font-size: 3em;
-  line-height: $big-play-button--line-height;
   height: $big-play-button--height;
   width: $big-play-button--width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding.
   display: block;
@@ -10,11 +7,10 @@
   top: 50%;
   left: 50%;
   padding: 0;
-  margin-top: -(math.div($big-play-button--height, 2));
-  margin-left: -(math.div($big-play-button--width, 2));
   cursor: pointer;
   opacity: 1;
   border: $big-play-button--border-size solid $primary-foreground-color;
+  transform: translate(-50%, -50%);
 
   // Need a slightly gray bg so it can be seen on black backgrounds
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
@@ -26,7 +22,10 @@
   & .vjs-icon-placeholder:before {
     @extend .vjs-icon-play;
 
-    @extend %icon-default;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }