<h1>PES advanced custom Header Bidding implementation</h1>

<!-- <script src="prebid.js"></script> -->

<!-- Step 1: Enable the Player config to use 'enable_wait_for_custom_config' via REST API -->

<!-- Step 2: Embed a Player with the associated Player ID. (you can alternatively use the dailymotion.createPlayer() to create the player dynamically) -->
  data-video="x8jdywp" id="myPlayer"

to check if the custom config has been set:<br /><br />
> inspect Network tab > filter vmap, click Play button & check Response tab of the call  https://adtester.dailymotion.com/vmap/x6feo7b<br />
>>> ccHb* should be in the payload<br />
<br /><br />
 * fake asynchronous bid request function
 * to be implemented by partners
 * @param {Object} state - the player state (retrieved by AD_READYTOFETCH)
 * @return {Promise}
 * @resolve {Object} computed customConfig object
 * @reject {String} error
const myFetchPrebid = async ({ videoId, adPosition } = {}) => {
  const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms))

  await timeout(2000)

  return {
    hbTest: 'customHBwithPES',
    hbVideoId: videoId || 'tooEarly',
    hbAdPosition: adPosition || 'preroll',

// Step 3: get the player and fetch advertising values from the header bidding solution in parallel
// When used with a first preroll, myFetchPrebid function shouldn't trigger a prebid auction since it is already ongoing. It should however trigger the auction for any other ad break than first preroll
Promise.all([dailymotion.getPlayer('myPlayer'), myFetchPrebid()])
  .then(([player, customConfig]) => {
    // Step 4: When ad values returned and the player is retrieved, update the player with setCustomConfig()

    // Step 5: Add an event listener AD_READYTOFETCH for the next ads
    // each time the event is caught, fetch new advertising values and pass it via setCustomConfig() 
    player.on(dailymotion.events.AD_READYTOFETCH, (state) => {
        .then((customConfig) => {
        .catch((err) => {
  .catch(() => {
    console.error("fail to get the player")

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.