From f98cf3c297271cdc32dac9c52cc01244395d0ba1 Mon Sep 17 00:00:00 2001
From: adimiz1 <adi.mizrahi@gmail.com>
Date: Tue, 30 Sep 2025 14:56:27 +0300
Subject: [PATCH 1/8] fix: add big pause button

---
 .../bigPauseButton/big-pause-button.js        | 61 +++++++++++++++++++
 .../bigPauseButton/big-pause-button.scss      | 56 +++++++++++++++++
 src/components/index.js                       |  4 +-
 src/video-player.js                           |  6 ++
 4 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 src/components/bigPauseButton/big-pause-button.js
 create mode 100644 src/components/bigPauseButton/big-pause-button.scss

diff --git a/src/components/bigPauseButton/big-pause-button.js b/src/components/bigPauseButton/big-pause-button.js
new file mode 100644
index 00000000..73f9efd8
--- /dev/null
+++ b/src/components/bigPauseButton/big-pause-button.js
@@ -0,0 +1,61 @@
+import videojs from 'video.js';
+import './big-pause-button.scss';
+
+// Extend from BigPlayButton to inherit all its styles and behavior
+const BigPlayButton = videojs.getComponent('BigPlayButton');
+
+class BigPauseButton extends BigPlayButton {
+  constructor(player, options) {
+    super(player, options);
+    this.controlText('Pause');
+    
+    // Only show on mobile
+    this.isMobile = videojs.browser.IS_IOS || 
+                    videojs.browser.IS_ANDROID || 
+                    /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    
+    if (!this.isMobile) {
+      this.hide();
+      return;
+    }
+
+    // Listen to player events
+    this.player().on('play', this.handlePlayPause.bind(this));
+    this.player().on('pause', this.handlePlayPause.bind(this));
+    
+    // Set initial state
+    this.handlePlayPause();
+  }
+
+  buildCSSClass() {
+    // Keep vjs-big-play-button class for styling, add our custom class
+    return `${super.buildCSSClass()} vjs-big-pause-button`;
+  }
+
+  handleClick() {
+    if (!this.player().paused()) {
+      this.player().pause();
+    }
+  }
+
+  handlePlayPause() {
+    if (!this.isMobile) return;
+    
+    if (!this.player().paused() && this.player().hasStarted()) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  dispose() {
+    // Clean up event listeners
+    this.player().off('play', this.handlePlayPause);
+    this.player().off('pause', this.handlePlayPause);
+    super.dispose();
+  }
+}
+
+videojs.registerComponent('BigPauseButton', BigPauseButton);
+
+export default BigPauseButton;
diff --git a/src/components/bigPauseButton/big-pause-button.scss b/src/components/bigPauseButton/big-pause-button.scss
new file mode 100644
index 00000000..a3281286
--- /dev/null
+++ b/src/components/bigPauseButton/big-pause-button.scss
@@ -0,0 +1,56 @@
+.cld-video-player {
+  // Big pause button - inherits all styling from .vjs-big-play-button
+  // Only override the icon to show pause instead of play
+  .vjs-big-pause-button {
+    
+    .vjs-icon-placeholder {
+      // Reset play button positioning
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+
+      &:before {
+        // Override the play triangle with pause bars
+        content: '';
+        position: relative;
+        display: block;
+        
+        // Reset triangle borders from play button
+        border: none;
+        margin: 0;
+        top: auto;
+        left: auto;
+        
+        // Two vertical bars for pause icon (smaller and properly spaced)
+        width: 6px;
+        height: 28px;
+        background: currentColor;
+        border-radius: 1.5px;
+        box-shadow: 12px 0 0 0 currentColor;
+        
+        // Shift left to center both bars together (6px + 12px/2 = 12px total width on each side)
+        transform: translateX(-6px);
+      }
+    }
+  }
+
+  // Sync fade with control bar (same timing as vjs-control-bar)
+  &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-pause-button {
+    transition: visibility 1s, opacity 1s;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  // Show with transition when controls are visible
+  &.vjs-has-started.vjs-user-active.vjs-playing .vjs-big-pause-button,
+  &.vjs-has-started.vjs-playing .vjs-big-pause-button {
+    transition: visibility 0.1s, opacity 0.1s;
+    visibility: visible;
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 3cc5d934..9e4e2318 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,6 +4,7 @@ import LogoButton from './logoButton/logo-button';
 import ProgressControlEventsBlocker from './progress-control-events-blocker/progress-control-events-blocker';
 import TitleBar from './title-bar/title-bar';
 import SourceSwitcherButton from './source-switcher-button/source-switcher-button';
+import BigPauseButton from './bigPauseButton/big-pause-button';
 
 export {
   JumpForwardButton,
@@ -11,5 +12,6 @@ export {
   LogoButton,
   ProgressControlEventsBlocker,
   TitleBar,
-  SourceSwitcherButton
+  SourceSwitcherButton,
+  BigPauseButton
 };
diff --git a/src/video-player.js b/src/video-player.js
index 86ad21ea..2255d82e 100644
--- a/src/video-player.js
+++ b/src/video-player.js
@@ -93,6 +93,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this._initPlugins();
     this._initJumpButtons();
     this._initPictureInPicture();
+    this._initBigPauseButton();
     this._setVideoJsListeners(ready);
   }
 
@@ -406,6 +407,11 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     }
   }
 
+  _initBigPauseButton() {
+    // Add BigPauseButton component to player (mobile-only, auto-detects in component)
+    this.videojs.addChild('BigPauseButton');
+  }
+
   _initCloudinary() {
     const cloudinaryConfig = this.playerOptions.cloudinary;
     cloudinaryConfig.chainTarget = this;

From 8acf9cf6bf162520585b03ddceb2cea00225a15e Mon Sep 17 00:00:00 2001
From: adimiz1 <adi.mizrahi@gmail.com>
Date: Tue, 30 Sep 2025 15:25:36 +0300
Subject: [PATCH 2/8] fix: move file location

---
 src/components/bigPauseButton/big-pause-button.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/bigPauseButton/big-pause-button.js b/src/components/bigPauseButton/big-pause-button.js
index 73f9efd8..22466d56 100644
--- a/src/components/bigPauseButton/big-pause-button.js
+++ b/src/components/bigPauseButton/big-pause-button.js
@@ -9,10 +9,8 @@ class BigPauseButton extends BigPlayButton {
     super(player, options);
     this.controlText('Pause');
     
-    // Only show on mobile
-    this.isMobile = videojs.browser.IS_IOS || 
-                    videojs.browser.IS_ANDROID || 
-                    /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    // Only show on mobile devices (use VideoJS's built-in detection)
+    this.isMobile = videojs.browser.IS_IOS || videojs.browser.IS_ANDROID;
     
     if (!this.isMobile) {
       this.hide();

From d3f6aa10990ef3ec676afb04652e488d7f928cb9 Mon Sep 17 00:00:00 2001
From: adimiz1 <adi.mizrahi@gmail.com>
Date: Sun, 5 Oct 2025 10:22:33 +0300
Subject: [PATCH 3/8] fix: reduce code

---
 .../bigPauseButton/big-pause-button.js        | 32 ++++++-------------
 .../bigPauseButton/big-pause-button.scss      | 13 --------
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/src/components/bigPauseButton/big-pause-button.js b/src/components/bigPauseButton/big-pause-button.js
index 22466d56..0fdb3f45 100644
--- a/src/components/bigPauseButton/big-pause-button.js
+++ b/src/components/bigPauseButton/big-pause-button.js
@@ -1,7 +1,6 @@
 import videojs from 'video.js';
 import './big-pause-button.scss';
 
-// Extend from BigPlayButton to inherit all its styles and behavior
 const BigPlayButton = videojs.getComponent('BigPlayButton');
 
 class BigPauseButton extends BigPlayButton {
@@ -9,51 +8,40 @@ class BigPauseButton extends BigPlayButton {
     super(player, options);
     this.controlText('Pause');
     
-    // Only show on mobile devices (use VideoJS's built-in detection)
     this.isMobile = videojs.browser.IS_IOS || videojs.browser.IS_ANDROID;
-    
     if (!this.isMobile) {
       this.hide();
       return;
     }
 
-    // Listen to player events
-    this.player().on('play', this.handlePlayPause.bind(this));
-    this.player().on('pause', this.handlePlayPause.bind(this));
-    
-    // Set initial state
+    this.boundHandler = this.handlePlayPause.bind(this);
+    this.player().on('play', this.boundHandler);
+    this.player().on('pause', this.boundHandler);
     this.handlePlayPause();
   }
 
   buildCSSClass() {
-    // Keep vjs-big-play-button class for styling, add our custom class
     return `${super.buildCSSClass()} vjs-big-pause-button`;
   }
 
   handleClick() {
-    if (!this.player().paused()) {
-      this.player().pause();
-    }
+    if (!this.player().paused()) this.player().pause();
   }
 
   handlePlayPause() {
     if (!this.isMobile) return;
-    
-    if (!this.player().paused() && this.player().hasStarted()) {
-      this.show();
-    } else {
-      this.hide();
-    }
+    (!this.player().paused() && this.player().hasStarted()) ? this.show() : this.hide();
   }
 
   dispose() {
-    // Clean up event listeners
-    this.player().off('play', this.handlePlayPause);
-    this.player().off('pause', this.handlePlayPause);
+    if (this.boundHandler) {
+      this.player().off('play', this.boundHandler);
+      this.player().off('pause', this.boundHandler);
+    }
     super.dispose();
   }
 }
 
 videojs.registerComponent('BigPauseButton', BigPauseButton);
 
-export default BigPauseButton;
+export default BigPauseButton;
\ No newline at end of file
diff --git a/src/components/bigPauseButton/big-pause-button.scss b/src/components/bigPauseButton/big-pause-button.scss
index a3281286..db64c7ef 100644
--- a/src/components/bigPauseButton/big-pause-button.scss
+++ b/src/components/bigPauseButton/big-pause-button.scss
@@ -1,10 +1,6 @@
 .cld-video-player {
-  // Big pause button - inherits all styling from .vjs-big-play-button
-  // Only override the icon to show pause instead of play
   .vjs-big-pause-button {
-    
     .vjs-icon-placeholder {
-      // Reset play button positioning
       top: 0;
       left: 0;
       width: 100%;
@@ -15,38 +11,29 @@
       overflow: visible;
 
       &:before {
-        // Override the play triangle with pause bars
         content: '';
         position: relative;
         display: block;
-        
-        // Reset triangle borders from play button
         border: none;
         margin: 0;
         top: auto;
         left: auto;
-        
-        // Two vertical bars for pause icon (smaller and properly spaced)
         width: 6px;
         height: 28px;
         background: currentColor;
         border-radius: 1.5px;
         box-shadow: 12px 0 0 0 currentColor;
-        
-        // Shift left to center both bars together (6px + 12px/2 = 12px total width on each side)
         transform: translateX(-6px);
       }
     }
   }
 
-  // Sync fade with control bar (same timing as vjs-control-bar)
   &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-pause-button {
     transition: visibility 1s, opacity 1s;
     visibility: hidden;
     opacity: 0;
   }
 
-  // Show with transition when controls are visible
   &.vjs-has-started.vjs-user-active.vjs-playing .vjs-big-pause-button,
   &.vjs-has-started.vjs-playing .vjs-big-pause-button {
     transition: visibility 0.1s, opacity 0.1s;

From a3b01cc7d633c2e03d3ee7a5bc67990472a3e0bd Mon Sep 17 00:00:00 2001
From: adimiz1 <adi.mizrahi@gmail.com>
Date: Sun, 5 Oct 2025 10:40:10 +0300
Subject: [PATCH 4/8] fix: e2e tests

---
 src/components/bigPauseButton/big-pause-button.js | 7 -------
 src/video-player.js                               | 5 +++--
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/bigPauseButton/big-pause-button.js b/src/components/bigPauseButton/big-pause-button.js
index 0fdb3f45..377b1611 100644
--- a/src/components/bigPauseButton/big-pause-button.js
+++ b/src/components/bigPauseButton/big-pause-button.js
@@ -8,12 +8,6 @@ class BigPauseButton extends BigPlayButton {
     super(player, options);
     this.controlText('Pause');
     
-    this.isMobile = videojs.browser.IS_IOS || videojs.browser.IS_ANDROID;
-    if (!this.isMobile) {
-      this.hide();
-      return;
-    }
-
     this.boundHandler = this.handlePlayPause.bind(this);
     this.player().on('play', this.boundHandler);
     this.player().on('pause', this.boundHandler);
@@ -29,7 +23,6 @@ class BigPauseButton extends BigPlayButton {
   }
 
   handlePlayPause() {
-    if (!this.isMobile) return;
     (!this.player().paused() && this.player().hasStarted()) ? this.show() : this.hide();
   }
 
diff --git a/src/video-player.js b/src/video-player.js
index 2255d82e..c0600055 100644
--- a/src/video-player.js
+++ b/src/video-player.js
@@ -408,8 +408,9 @@ class VideoPlayer extends Utils.mixin(Eventable) {
   }
 
   _initBigPauseButton() {
-    // Add BigPauseButton component to player (mobile-only, auto-detects in component)
-    this.videojs.addChild('BigPauseButton');
+    if (videojs.browser.IS_IOS || videojs.browser.IS_ANDROID) {
+      this.videojs.addChild('BigPauseButton');
+    }
   }
 
   _initCloudinary() {

From 4b2972d5aed491396a566e7a55a84a9883810001 Mon Sep 17 00:00:00 2001
From: adimiz1 <adi.mizrahi@gmail.com>
Date: Wed, 15 Oct 2025 07:56:18 +0300
Subject: [PATCH 5/8] fix: hardcoded values

---
 .../bigPauseButton/big-pause-button.js        | 29 +++++++-----
 .../bigPauseButton/big-pause-button.scss      | 47 +++++++++----------
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/components/bigPauseButton/big-pause-button.js b/src/components/bigPauseButton/big-pause-button.js
index 377b1611..53841233 100644
--- a/src/components/bigPauseButton/big-pause-button.js
+++ b/src/components/bigPauseButton/big-pause-button.js
@@ -6,12 +6,11 @@ const BigPlayButton = videojs.getComponent('BigPlayButton');
 class BigPauseButton extends BigPlayButton {
   constructor(player, options) {
     super(player, options);
-    this.controlText('Pause');
-    
-    this.boundHandler = this.handlePlayPause.bind(this);
-    this.player().on('play', this.boundHandler);
-    this.player().on('pause', this.boundHandler);
-    this.handlePlayPause();
+    this.boundUpdate = this.handleUpdate.bind(this);
+    const p = this.player();
+    p.on('play', this.boundUpdate);
+    p.on('pause', this.boundUpdate);
+    this.handleUpdate();
   }
 
   buildCSSClass() {
@@ -19,17 +18,23 @@ class BigPauseButton extends BigPlayButton {
   }
 
   handleClick() {
-    if (!this.player().paused()) this.player().pause();
+    const p = this.player();
+    p.paused() ? p.play() : p.pause();
   }
 
-  handlePlayPause() {
-    (!this.player().paused() && this.player().hasStarted()) ? this.show() : this.hide();
+  handleUpdate() {
+    const p = this.player();
+    const paused = p.paused();
+    (!paused && p.hasStarted()) ? this.show() : this.hide();
+    this[paused ? 'removeClass' : 'addClass']('vjs-playing');
+    this.controlText(paused ? 'Play' : 'Pause');
   }
 
   dispose() {
-    if (this.boundHandler) {
-      this.player().off('play', this.boundHandler);
-      this.player().off('pause', this.boundHandler);
+    if (this.boundUpdate) {
+      const p = this.player();
+      p.off('play', this.boundUpdate);
+      p.off('pause', this.boundUpdate);
     }
     super.dispose();
   }
diff --git a/src/components/bigPauseButton/big-pause-button.scss b/src/components/bigPauseButton/big-pause-button.scss
index db64c7ef..6f0512ad 100644
--- a/src/components/bigPauseButton/big-pause-button.scss
+++ b/src/components/bigPauseButton/big-pause-button.scss
@@ -1,33 +1,30 @@
 .cld-video-player {
-  .vjs-big-pause-button {
-    .vjs-icon-placeholder {
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: visible;
+  .vjs-big-pause-button .vjs-icon-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 
-      &:before {
-        content: '';
-        position: relative;
-        display: block;
-        border: none;
-        margin: 0;
-        top: auto;
-        left: auto;
-        width: 6px;
-        height: 28px;
-        background: currentColor;
-        border-radius: 1.5px;
-        box-shadow: 12px 0 0 0 currentColor;
-        transform: translateX(-6px);
-      }
+    &:before {
+      position: static;
+      border: none;
+      margin: 0;
+      width: auto;
+      height: auto;
+      font-size: 0.6em;
+      line-height: 1;
     }
   }
 
+  &.vjs-playing .vjs-big-pause-button .vjs-icon-placeholder:before,
+  .vjs-big-pause-button.vjs-playing .vjs-icon-placeholder:before {
+    content: '\f103';
+  }
+
   &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-pause-button {
     transition: visibility 1s, opacity 1s;
     visibility: hidden;

From 4d3c1db3f9ab0928986d6e4d417c71c1cd037663 Mon Sep 17 00:00:00 2001
From: adimiz1 <adi.mizrahi@gmail.com>
Date: Mon, 20 Oct 2025 07:59:20 +0300
Subject: [PATCH 6/8] fix: pause button css

---
 .../bigPauseButton/big-pause-button.js        | 25 +++++++++++--------
 .../bigPauseButton/big-pause-button.scss      |  7 +++++-
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/bigPauseButton/big-pause-button.js b/src/components/bigPauseButton/big-pause-button.js
index 53841233..e6dbb163 100644
--- a/src/components/bigPauseButton/big-pause-button.js
+++ b/src/components/bigPauseButton/big-pause-button.js
@@ -7,9 +7,9 @@ class BigPauseButton extends BigPlayButton {
   constructor(player, options) {
     super(player, options);
     this.boundUpdate = this.handleUpdate.bind(this);
-    const p = this.player();
-    p.on('play', this.boundUpdate);
-    p.on('pause', this.boundUpdate);
+    const playerInstance = this.player();
+    playerInstance.on('play', this.boundUpdate);
+    playerInstance.on('pause', this.boundUpdate);
     this.handleUpdate();
   }
 
@@ -18,23 +18,26 @@ class BigPauseButton extends BigPlayButton {
   }
 
   handleClick() {
-    const p = this.player();
-    p.paused() ? p.play() : p.pause();
+    const player = this.player();
+    player.paused() ? player.play() : player.pause();
   }
 
   handleUpdate() {
-    const p = this.player();
-    const paused = p.paused();
-    (!paused && p.hasStarted()) ? this.show() : this.hide();
+    const player = this.player();
+    if (!player) {
+      return;
+    }
+    const paused = player.paused();
+    (!paused && player.hasStarted()) ? this.show() : this.hide();
     this[paused ? 'removeClass' : 'addClass']('vjs-playing');
     this.controlText(paused ? 'Play' : 'Pause');
   }
 
   dispose() {
     if (this.boundUpdate) {
-      const p = this.player();
-      p.off('play', this.boundUpdate);
-      p.off('pause', this.boundUpdate);
+      const player = this.player();
+      player.off('play', this.boundUpdate);
+      player.off('pause', this.boundUpdate);
     }
     super.dispose();
   }
diff --git a/src/components/bigPauseButton/big-pause-button.scss b/src/components/bigPauseButton/big-pause-button.scss
index 6f0512ad..b1c982ab 100644
--- a/src/components/bigPauseButton/big-pause-button.scss
+++ b/src/components/bigPauseButton/big-pause-button.scss
@@ -1,4 +1,8 @@
 .cld-video-player {
+  &.cld-fluid .vjs-big-pause-button {
+    max-width: 15%;
+  }
+
   .vjs-big-pause-button .vjs-icon-placeholder {
     display: flex;
     align-items: center;
@@ -8,6 +12,7 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    container-type: inline-size;
 
     &:before {
       position: static;
@@ -16,7 +21,7 @@
       width: auto;
       height: auto;
       font-size: 0.6em;
-      line-height: 1;
+      font-size: clamp(0.35em, 50cqw, 0.8em);
     }
   }
 

From 3c96c601b53cedad27faac1532f646b6a3389a9d Mon Sep 17 00:00:00 2001
From: adimiz1 <adi.mizrahi@gmail.com>
Date: Mon, 20 Oct 2025 08:12:58 +0300
Subject: [PATCH 7/8] fix: big pause button css

---
 src/components/bigPauseButton/big-pause-button.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/bigPauseButton/big-pause-button.scss b/src/components/bigPauseButton/big-pause-button.scss
index b1c982ab..a2d6d656 100644
--- a/src/components/bigPauseButton/big-pause-button.scss
+++ b/src/components/bigPauseButton/big-pause-button.scss
@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../../assets/styles/icons';
+
 .cld-video-player {
   &.cld-fluid .vjs-big-pause-button {
     max-width: 15%;
@@ -20,14 +23,14 @@
       margin: 0;
       width: auto;
       height: auto;
-      font-size: 0.6em;
       font-size: clamp(0.35em, 50cqw, 0.8em);
     }
   }
 
   &.vjs-playing .vjs-big-pause-button .vjs-icon-placeholder:before,
   .vjs-big-pause-button.vjs-playing .vjs-icon-placeholder:before {
-    content: '\f103';
+    font-family: icons.$icon-font-family;
+    content: icons.char(map.get(icons.$icons, pause));
   }
 
   &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-pause-button {

From 4ab4f9fa422564adf9e85770b88e2b917848f070 Mon Sep 17 00:00:00 2001
From: adimiz1 <adi.mizrahi@gmail.com>
Date: Tue, 21 Oct 2025 07:24:05 +0300
Subject: [PATCH 8/8] fix: css class

---
 src/components/bigPauseButton/big-pause-button.js   | 4 ++--
 src/components/bigPauseButton/big-pause-button.scss | 6 +-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/bigPauseButton/big-pause-button.js b/src/components/bigPauseButton/big-pause-button.js
index e6dbb163..6fd30a28 100644
--- a/src/components/bigPauseButton/big-pause-button.js
+++ b/src/components/bigPauseButton/big-pause-button.js
@@ -19,7 +19,7 @@ class BigPauseButton extends BigPlayButton {
 
   handleClick() {
     const player = this.player();
-    player.paused() ? player.play() : player.pause();
+    !player.paused() && player.pause();
   }
 
   handleUpdate() {
@@ -30,7 +30,7 @@ class BigPauseButton extends BigPlayButton {
     const paused = player.paused();
     (!paused && player.hasStarted()) ? this.show() : this.hide();
     this[paused ? 'removeClass' : 'addClass']('vjs-playing');
-    this.controlText(paused ? 'Play' : 'Pause');
+    this.controlText('Pause');
   }
 
   dispose() {
diff --git a/src/components/bigPauseButton/big-pause-button.scss b/src/components/bigPauseButton/big-pause-button.scss
index a2d6d656..0e1e28d5 100644
--- a/src/components/bigPauseButton/big-pause-button.scss
+++ b/src/components/bigPauseButton/big-pause-button.scss
@@ -7,6 +7,7 @@
   }
 
   .vjs-big-pause-button .vjs-icon-placeholder {
+    @extend .vjs-icon-pause;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -27,11 +28,6 @@
     }
   }
 
-  &.vjs-playing .vjs-big-pause-button .vjs-icon-placeholder:before,
-  .vjs-big-pause-button.vjs-playing .vjs-icon-placeholder:before {
-    font-family: icons.$icon-font-family;
-    content: icons.char(map.get(icons.$icons, pause));
-  }
 
   &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-pause-button {
     transition: visibility 1s, opacity 1s;