Prebid Video | Video Outstream Example with No Ad Server

An example of an outstream video with a pre-roll ad using Prebid.js and no ad server.

Important: This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.

Out-stream Example


  <h3>Out-stream Example</h3>
  
  <div id="ad-unit-1"></div>
  
var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];
  
  var adUnit = {
    code: "ad-unit-1",
    mediaTypes: {
      video: {
        context: "outstream",
        playerSize: [640, 360],
        mimes: ["video/mp4", "video/webm", "video/ogg"],
        protocols: [2, 3, 5, 6, 7, 8],
        api: [2],
      }
    },
    bids: [
      {
        bidder: "michao",
        params: {
          placement: "inbanner",
          site: 1,
          test: true
        },
      },
    ],
    renderer: {
      url: `https://cdn.jsdelivr.net/npm/in-renderer-js@1/dist/in-renderer.umd.min.js`,
      render: (bid) => {
        var inRenderer = new window.InRenderer();
        inRenderer.render("ad-unit-1", bid);
      },
    },
  };
  
  pbjs.que.push(function() {
    pbjs.addAdUnits(adUnit);
    pbjs.requestBids({
      timeout: 5000,
      bidsBackHandler: function () {
        const highestCpmBids = pbjs.getHighestCpmBids("ad-unit-1");
        pbjs.renderAd('ad-unit-1', highestCpmBids[0].adId);
      },
    });
  })
  
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Prebid Video | Video Outstream Example with  No Ad Server</title>

    <!-- required scripts -->
    <script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  </head>
  <body>
  
  <!-- javascript -->
  <script>var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];
  
  var adUnit = {
    code: "ad-unit-1",
    mediaTypes: {
      video: {
        context: "outstream",
        playerSize: [640, 360],
        mimes: ["video/mp4", "video/webm", "video/ogg"],
        protocols: [2, 3, 5, 6, 7, 8],
        api: [2],
      }
    },
    bids: [
      {
        bidder: "michao",
        params: {
          placement: "inbanner",
          site: 1,
          test: true
        },
      },
    ],
    renderer: {
      url: `https://cdn.jsdelivr.net/npm/in-renderer-js@1/dist/in-renderer.umd.min.js`,
      render: (bid) => {
        var inRenderer = new window.InRenderer();
        inRenderer.render("ad-unit-1", bid);
      },
    },
  };
  
  pbjs.que.push(function() {
    pbjs.addAdUnits(adUnit);
    pbjs.requestBids({
      timeout: 5000,
      bidsBackHandler: function () {
        const highestCpmBids = pbjs.getHighestCpmBids("ad-unit-1");
        pbjs.renderAd('ad-unit-1', highestCpmBids[0].adId);
      },
    });
  })
  </script>

  <!-- html -->
  
  <h3>Out-stream Example</h3>
  
  <div id="ad-unit-1"></div>
  
  </body>
</html>