2 files changed, 17 insertions, 6 deletions
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index 0497c42c..eca523f7 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -111,7 +111,6 @@ class Ads {
         // Create the container for our advertisements
         this.elements.container = utils.createElement('div', {
             class: this.player.config.classNames.ads,
-            hidden: '',
         });
         this.player.elements.container.appendChild(this.elements.container);
 
@@ -451,8 +450,8 @@ class Ads {
      * Resume our video.
      */
     resumeContent() {
-        // Hide our ad container
-        utils.toggleHidden(this.elements.container, true);
+        // Hide the advertisement container
+        this.elements.container.style.zIndex = '';
 
         // Ad is stopped
         this.playing = false;
@@ -467,8 +466,8 @@ class Ads {
      * Pause our video
      */
     pauseContent() {
-        // Show our ad container.
-        utils.toggleHidden(this.elements.container, false);
+        // Show the advertisement container
+        this.elements.container.style.zIndex = '3';
 
         // Ad is playing.
         this.playing = true;
diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss
index 21a28e02..98620508 100644
--- a/src/sass/plugins/ads.scss
+++ b/src/sass/plugins/ads.scss
@@ -9,7 +9,19 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 3; // Above the controls
+    z-index: -1; // Hide it.
+
+    // Make sure the inner container is big enough for the ad creative.
+    > div {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        iframe {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+    }
 
     &::after {
         background: rgba($plyr-color-gunmetal, 0.8);