Resizing the ad container while having it on display none will return offset width and height of 0, which will cause ads not to play when ad sizes are set within the clients DSP. Also making sure that the inner containers of the ad container are full size. The container is now hidden/ displayed using z-index.

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);