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