diff --git a/src/css/_private-variables.scss b/src/css/_private-variables.scss
index e2423b243..410121e14 100644
--- a/src/css/_private-variables.scss
+++ b/src/css/_private-variables.scss
@@ -13,6 +13,8 @@ $secondary-background-transparency: 0.5 !default;
 $text-font-family: Arial, Helvetica, sans-serif !default;
 
 // Using the '--' naming for component-specific styles
+$big-play-button--border-size: 0.06666em !default;
 $big-play-button--width: 3em !default;
-$big-play-button--height: 1.5em !default;
+$big-play-button--line-height: 1.5em !default;
+$big-play-button--height: $big-play-button--line-height + ($big-play-button--border-size * 2) !default;
 $big-play-button--transparency: 0.8 !default;
diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss
index 04b4e034d..64d0352c6 100644
--- a/src/css/components/_big-play.scss
+++ b/src/css/components/_big-play.scss
@@ -1,6 +1,6 @@
 .video-js .vjs-big-play-button {
   font-size: 3em;
-  line-height: $big-play-button--height;
+  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,7 +10,7 @@
   padding: 0;
   cursor: pointer;
   opacity: 1;
-  border: 0.06666em solid $primary-foreground-color;
+  border: $big-play-button--border-size solid $primary-foreground-color;
 
   // Need a slightly gray bg so it can be seen on black backgrounds
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);