From 819f7d1080ef2748fa1c123ad0f54d075c654ab9 Mon Sep 17 00:00:00 2001
From: Arthur Hulsman <a.hulsman@orangegames.com>
Date: Wed, 7 Mar 2018 15:43:48 +0100
Subject: [PATCH] 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     |  9 ++++-----
 src/sass/plugins/ads.scss | 14 +++++++++++++-
 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);