Video Outstream: prebid,js Error in Example

[richmadriz]

Error in Example outstream no server, https://docs.prebid.org/examples/video/outstream/pb-ve-outstream-no-server.html
We are working trying to separate this example but it has an error which happens to us in the same way in our demo.
ms: Error rendering ad (id: 31f3cda2d27635): renderAd was prevented from writing to the main document.

[jarrettabello]

I took at look at this test page and found a few issues. I believe our test code example needs to be reworked here. We are using document in the renderAd function and we need to specify an element as an ad container.

By updating the test page with an ad container to inject the ad into the error resolves.

Also worth noting that the script tag that contains the prebid configuration on the page is a script tag with text/plain <script type="text/plain" class="optanon-category-C0003"> -- that should be updated to text/javascript

<script type="text/javascript" class="optanon-category-C0003">
	    var pbjs = pbjs || {};
	    pbjs.que = pbjs.que || [];
	    var adUnits = [{
	        code: 'video1',
	        mediaTypes: {
	            video: {
	                context: 'outstream',
			playerSize: [640, 480],
			mimes: ['video/mp4'],
			protocols: [1, 2, 3, 4, 5, 6, 7, 8],
			playbackmethod: [2],
			skip: 1
	            }
	        },
	        bids: [{
	            bidder: 'appnexus',
	            params: {
	                placementId: 13232385
	            }
	        }]
        }];

        pbjs.que.push(function() {
            pbjs.addAdUnits(adUnits);
            pbjs.requestBids({
                timeout: 1000,
                bidsBackHandler: function(bids) {
                    var highestCpmBids = pbjs.getHighestCpmBids('video1');
                    pbjs.renderAd(document.getElementById('myad'), highestCpmBids[0].adId);
                }
            });
        });
    </script>

[richmadriz]

I tried this already by obtaining a div apart from video1 and obtaining the video1 Id tag itself but it does not work with any div that is in the document either,

<script> var pbjs = pbjs || {}; pbjs.que = pbjs.que || []; function callANRenderer(bid, ad) { const adResponse = { ad: { video: { content: ad, player_width: 640, player_height: 480, } } } bid.renderer.push(() => { window.ANOutstreamVideo.renderAd({ targetId: bid.adUnitCode, adResponse, }); }); } function render(bid) { let ad = bid.ad || bid.vastXml; if (ad) { callANRenderer(bid, ad) } else { if (bid.vastUrl) { (async() => { ad = await fetch(resp).then(resp => resp.text()); if (typeof ad === 'string') { callANRenderer(bid, ad); } else { console.log('Invalid VAST'); } })(); } else { console.log('Invalid ad'); } } } const adUnits = [{ code: 'video1', mediaTypes: { video: { context: 'outstream', playerSize: [ [640, 480] ], mimes: ['video/mp4'], protocols: [1, 2, 3, 4, 5, 6, 7, 8], api: [2], linearity: 1, playbackmethod: [2], skip: 1, renderer: { render, url: "https://acdn.adnxs.com/video/outstream/ANOutstreamVideo.js" }, maxduration: 30 } }, bids: [{ bidder: 'appnexus', params: { placementId: 31776638 } }] }]; pbjs.que.push(function() { pbjs.addAdUnits(adUnits); pbjs.setConfig({ debug: true, cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' } }); pbjs.requestBids({ timeout: 1000, bidsBackHandler: function(bids) { const highestCpmBids = pbjs.getHighestCpmBids('video1'); pbjs.renderAd(document.getElementById('myad'), highestCpmBids[0].adId); } }); }); </script>

and this in the BODY

<div id="video1"></div>
<div id="myad"></div>

[dgirardi]

Related to prebid/prebid.github.io#5400

[dgirardi]

Also related: prebid/prebid.github.io#5248

[patmmccann]

fixed in #12391

[muuki88]

Hi @jarrettabello

Thanks for the detailed looked. I have not seen the issue earlier, thanks for your patience.
To give a quick feedback on your findings

Also worth noting that the script tag that contains the prebid configuration on the page is a script tag with text/plain <script type="text/plain" class="optanon-category-C0003"> -- that should be updated to text/javascript

This is intentional. While it has changed, due to a migration to consentmanager, it is still text/plain and will be inserted after consent.

By updating the test page with an ad container to inject the ad into the error resolves.

The examples are all part of the docs repo now, so contributing a fix is possible

• https://github.com/prebid/prebid.github.io/tree/master/dev-docs/examples
• https://github.com/prebid/prebid.github.io/tree/master/examples/video

We happily accept pull requests 😊 If you need any guidance, don't hesitate to ask.