Creating iFrame inside slot for VPAID ad is not rendering DOM of the frame

748 Views Asked by At

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?

1

There are 1 best solutions below

1
On

It appeared to be a PlayerJS issue, so the question is no longer actual