ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved the ads container to be outside of the video wrapper. This way we can easily move the ad in front or behind the video controls based on content resume or pause IMA events.

Browse Source
This commit is contained in:
Arthur Hulsman 2018-01-17 12:19:32 +01:00
parent 12a7a4142c
commit 9e52296dc6
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/js/plugins/ads.js
View File

@ -276,7 +276,11 @@ class Ads {
} }
setupAdDisplayContainer() { 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. // So we can run VPAID2.
google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED); 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 // We assume the adContainer is the video container of the plyr element
// that will house the ads. // 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 // The AdDisplayContainer call from google IMA sets the style attribute
// by default. We remove the inline style and set it through the stylesheet. // 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. // Set class name on the adDisplayContainer element.
this.adsDisplayElement.setAttribute('class', this.player.config.classNames.ads); 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 // Play ads when clicked. Wait until the adsManager and adsLoader
// are both resolved. // are both resolved.
Promise.all([ Promise.all([

2
src/sass/plugins/ads.scss
View File

@ -9,7 +9,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
z-index: 10; z-index: 1;
video { video {
left: 0; left: 0;