diff options
| -rw-r--r-- | src/js/plugins/ads.js | 18 | ||||
| -rw-r--r-- | src/sass/plugins/ads.scss | 2 |
2 files changed, 16 insertions, 4 deletions
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index 87ce61a1..48a5e4da 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -276,7 +276,11 @@ class Ads { } setupAdDisplayContainer() { - const { wrapper } = this.player.elements; + // Create the container for our advertisements. + const container = utils.createElement('div', { + class: this.player.config.classNames.ads, + }); + this.player.elements.container.appendChild(container); // So we can run VPAID2. google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED); @@ -287,9 +291,9 @@ class Ads { // We assume the adContainer is the video container of the plyr element // that will house the ads. - this.adDisplayContainer = new google.ima.AdDisplayContainer(wrapper); + this.adDisplayContainer = new google.ima.AdDisplayContainer(container); - this.adsDisplayElement = wrapper.firstChild; + this.adsDisplayElement = container.firstChild; // The AdDisplayContainer call from google IMA sets the style attribute // by default. We remove the inline style and set it through the stylesheet. @@ -298,6 +302,14 @@ class Ads { // Set class name on the adDisplayContainer element. this.adsDisplayElement.setAttribute('class', this.player.config.classNames.ads); + // Make sure our advertisement container has the right z-index. + this.on('CONTENT_PAUSE_REQUESTED', () => { + container.style.zIndex = '3'; + }); + this.on('CONTENT_RESUME_REQUESTED', () => { + container.style.zIndex = '1'; + }); + // Play ads when clicked. Wait until the adsManager and adsLoader // are both resolved. Promise.all([ diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss index 41d4d8d1..b6664fe9 100644 --- a/src/sass/plugins/ads.scss +++ b/src/sass/plugins/ads.scss @@ -9,7 +9,7 @@ position: absolute; right: 0; top: 0; - z-index: 10; + z-index: 1; video { left: 0; |