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.

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
+        // Hide the advertisement container
-        utils.toggleHidden(this.elements.container, true);
+        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.
+        // Show the advertisement container
-        utils.toggleHidden(this.elements.container, false);
+        this.elements.container.style.zIndex = '3';
 
         // Ad is playing.
         this.playing = true;

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