This is good news for those who would like to promote YouTube and Twitch videos through VPAID ad format via Adserver.Online platform. We provide special tools for users to use, and here we will explain how to set everything up.
Since VPAID is a wrapper, first, you need to create a placeholder ad. In this case, a placeholder ad has to be a banner (Banners / HTML/JS ad format).
We recommend setting custom size to 100% x 100%. It will allow for auto-scaling YouTube/Twitch videos to fill all of the available space of a video player.
The content of the HTML/JS banner has to be as one of the snippets below (subject to a video platform used).
Youtube's snippet
<div id="player-{element}"></div> <script src="{mediaUrl}/js/vast/embed_helper.js"></script> <script> _ASO.Embed.Youtube('player-{element}', '{element}', '{clickCounterUrl}', { height: '100%', width: '100%', videoId: 'VIDEO_ID', playerVars: { autoplay: 0, controls: 0, mute: 1, modestbranding: 1, disablekb: 1 } }); </script>
Where VIDEO_ID is Youtube's video ID (for example, "ih9Uo3xfq-U"). This value should be extracted from the video's URL, e.g. https://www.youtube.com/watch?v=ih9Uo3xfq-U
Twitch's snippet
<div id="player-{element}" style="height:100%"></div> <script src="{mediaUrl}/js/vast/embed_helper.js"></script> <script> _ASO.Embed.Twitch('player-{element}', '{element}', '{clickCounterUrl}', { height: '100%', width: '100%', channel: "CHANNEL_ID", mute: 1, autoplay: 0 }); </script>
Where CHANNEL_ID is Twitch's channel ID, e.g. "monstercat"
Example of a placeholder ad configured for YouTube:
After creating a placeholder, you need to create a new VAST / VPAID ad and select a newly created placeholder ad in the Banner field.
We recommend unchecking the "Allow skip ad" option. It won't make this ad non-skippable in this case, but will enable special behavior needed for YouTube/Twitch player.
If you would like your ad to fit the height of a video player, you need to tweak CSS styles in the Appearance section of your VPAID ad. More specifically, you should insert "height: 100%" as shown below.
That's basically it. This ad will be available in your VAST tags.
How to promote YouTube and Twitch videos – demo
https://adserver.online/demo/video
Troubleshooting
To check how your VAST ad looks, you may use these services: