I've been trying to figure out this issue for quite a long time. I'm creating VPAID script to support basic VPAID functionality according to the specification.
To display ads I'm taking the slot provided in initAd params and append an iFrame with my video player inside (PlayerJS) to show ads (it's mandatory to use own player for third-party events tracking etc.). Everything is working well if slot isn't hidden by display CSS property or if its container is not. When it's hidden, the browser won't let the iframe dom to render with js and so player is not starting.
initAd(width, height, viewMode, desiredBitrate, creativeData, environmentVars) {
this._attributes.width = width
this._attributes.height = height
this._attributes.viewMode = viewMode
this._attributes.desiredBitrate = desiredBitrate
this._slot = environmentVars.slot || this.this.emit('AdError', 'Slot is invalid')
this._slotWnd = function(a) {
a = a.ownerDocument
return a.defaultView || a.parentWindow
}(this._slot)
this._videoSlot = environmentVars.videoSlot || this.this.emit('AdError', 'Video slot is invalid')
try {
this.adParameters = JSON.parse(creativeData.AdParameters)
} catch (e) {
console.error('Error parsing AdParameters')
console.log(e)
}
this._slotWnd.addEventListener('message', (event) => { this.eventHandler(event, this) })
this._player = new PlayerFrameIniter(this._slot, this._slotWnd, false, true)
this._player.init( () => this.emit('AdLoaded') )
}
And in PlayerFrameIniter I'm creating an iframe like this:
createIframe(container, url, onFrameLoaded) {
this._frame = this._context.document.createElement('iframe')
const style = {
width: '100%',
height: '100%',
border: 0,
position: 'absolute',
overflow: 'hidden'
}
Object.assign(this._frame.style, style)
this._frame.src = url
this._frame.onload = onFrameLoaded
container.appendChild(this._frame)
}
How can I make frame inside slot render correctly or maybe there's a different approach for this task?
It appeared to be a PlayerJS issue, so the question is no longer actual