From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

In-View

OutStream In-View banner is usually implemented inside website content, between paragraphs or articles. Initially banner is not visible. When user scrolls down to banner placement, banner is initiated and expanding animation takes place. Banner width by default is 100% responsive, meaning it will take full placement width, and height will be auto adjusted based on original video's aspect ratio. When video is playing and banner is not visible in viewport, video is paused. Video sound can be toggled by hovering over banner or clicking on mute icon.

  • How it helps Publishers/Sell-side?
    • Solves the lack of In-Stream inventory problem.
    • Highly engaging In-View format.
    • Renders inside publishers' content.
    • Same tag can be used on multiple placements.

    Usually, video inventory has a high price and high engagement, but is difficult to sell at scale. The demand for buying In-Stream pre-roll inventory is usually much higher than the supply, so publishers seek for other means to compensate ​for​ that. It is popular to sell Rich Media formats that can play video ads, but this requires producing video banners on each instance of sales and the buy side becomes more complicated.

    Selling video inventory at scale requires a format that is both easy to run from the buying side and has attractive engagement metrics and viewability from the selling side.

  • How it helps Agencies/Buy-side?
    • Set as In-Stream Ad.
    • Ad does not require anything apart from a video file.
    • Same Video Ad can be run across all inventory placements, both pre-roll/in-stream and out-stream, using the same RTB activity.
    • In-View high viewability format.

    On one hand, the workflow is greatly simplified and buying side can deliver video ads in a matter of minutes, instead of dealing with Flash/HTML5 publisher specific templates that are necessary to setup a banner with video. On the other hand, agencies can be rest assured that engagement is high and viewability is guaranteed.

  • Technical specifications
    • HTML5 based video player;
    • In-View;
    • Base banner format is IAB Pushdown;
    • Connects to PMP/SSP;
    • Programmatically buying side exposes it as an In-Stream inventory;
    • Video Ad is delivered using VAST/VPAID.
  • Mobile Autoplay

    If the banner is supposed to run on mobile placements iOS autoplay option must be checked in Pre-roll banner's playback settings.

  • How to get started?
    • Contact pod.video@adform.com
    • PMP In-Stream placement is generated for a publisher.
    • Custom tag is generated (several lines of JavaScript, same as standard Adform tags).
    • Publisher has to integrate the tag into a website.
    • Inventory can be bought through our RTB.
  • Test and Production/Live tag
    Test tag

    Test tag

    Publishers can use this tag to test how this format works on their page.

    <div id="adform-outstream" style="height:0;overflow:hidden;">
      <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js"
        data-vast-id="11136859">
      </script>
    </div>

    NOTE: If the banner is supposed to run on mobile placements as well MPG video must be assigned to in-stream banner for autoplay functionality to work on mobile devices.

     

    Production/Live tag

    Publishers can use these tags to run actual campaigns

    To implement an ad that uses Adform XML which returns a campaign creative ( BN number )

    <div id="adform-outstream" style="height:0;overflow:hidden;">
      <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js"
        data-vast-id="*****">
      </script>
    </div>

    To implement an ad that uses Adform XML of the publisher's placement ( MID number )

    <div id="adform-outstream" style="height:0;overflow:hidden;">
      <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js"
        data-pmp-id="*****">
      </script>
    </div>

    ***** - PMP In-Stream Placement Master Tag ID. When creating In-Stream placement in the PMP you should assign a creative that has MP4 and WEBM as required file types.

    NOTE: If the banner is supposed to run on mobile placements as well MPG video must be assigned to in-stream banner for autoplay functionality to work on mobile devices.

     

    Smart Insert

    If publisher does not have a specific placement OutStream should be rendered into, one can use "smart insert" feature.

    Configuration example:

    <script>
      (function(window, document) {
        window.ADFSlot = function() {
          var el = document.querySelectorAll("#entr-content > p");
          var insertion = "near-fold"; // possible methods: "near-fold" and "middle"
          return {
            paragraphs: el, 
            insertion: insertion
          };
        }
      })(window, document);
    </script>
    
    <div id="adform-outstream" style="height:0;overflow:hidden;">
      <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js"
        data-pmp-id="*****">
      </script>
    </div>

    NOTE: If the banner is supposed to run on mobile placements as well MPG video must be assigned to in-stream banner for autoplay functionality to work on mobile devices.

    • ADFSlot global method should return paragraphs from article and insertion type.
    • paragraphs should use CSS selector syntax in querySelectorAll method.
    • If insertion property is empty then you should pass specific element to paragraphs before which banner will render.
    • 'middle' property in the insertion parameter means banner will try to render in the middle of an article. While 'near-fold' will make banner render as close to the fold as possible.

    EXAMPLE: Main div holding text is #articleText, this element consists of p elements:

    smart_insert

    Live examplesExample #1 | Example #2

  • Additional parameters
    • data-pmp-id - Placement number or PMP master tag ID.
    • data-vast-id - In-stream banner's tag BN.
    • data-max-width - max width for initial banner. If not defined banner will be 100% width.
    • data-visible-threshold - string percent:time, ex.: 50:1 or 25:2, or 75:0.5.
    • data-sound-enabled - string true. By default sound is disabled.
    • data-sound-onhover - string false. Toggle sound by hovering mouse on banner area.
    • data-skip-button-label - string `skip`. Add custom skip button label.
    • data-unmute-delay - string `timeout`. Add unmute delay on hover (sec). E.g. data-unmute-delay="1" will cause the banner to unmute after 1sec once hovered on banner area.
    • data-init-on-inscreen - string `false`. Make OutStream initialize instantly on page load. By default banner initializes when it is in screen.
    • data-close-oncomplete - string `false`. When video ends, parameter prevents OutStream from collapsing and jumps back to first frame of the video.

    Example of tag with additional parameters:

    <div id="adform-outstream" style="height:0;overflow:hidden;">
      <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js"
        data-vast-id="5386383"
        data-skip-button-label="Custon Skip Label">
      </script>
    </div>

    NOTE: Either data-pmp-id or data-vast-id must be defined to show the ad.

     

  • Passback

    Example #1:

    Passback can be implemented by publishers to execute custom javascript code depending on banner state.

    <script>
      (function(window, document, Adform){            
        window._adform = window._adform || [];
        var vastOrPmpId = 12345; // Actual PMP ID or VAST ID should be inserted here
    
        _adform.push([vastOrPmpId+'.pmp.empty', function() {
            console.log('empty');
        }]);
    
        _adform.push([vastOrPmpId+'.pmp.success', function() {
            console.log('great success!');
        }]);
    
        _adform.push([vastOrPmpId+	'.ad.ready', function() {
            console.log('ad is ready');
        }]);
      })(window, document, (Adform = window.Adform || {}));
    </script>

     

    Example #2:

    Render Passback banner from 3rd party adserver in case Adform PMP does not return any VAST tag.

    <script type="text/javascript">
     (function(window, document, Adform){
       window._adform = window._adform || [];
       var pmpOrId = *****; // Actual PMP ID or VAST ID should be inserted here
       _adform.push([pmpOrId+'.pmp.empty', function () {
         renderPassback();
       }]);
    
       function renderPassback() {
         var iframe = '<iframe id="adform-outstream-fallback" src="javascript:\'\'" width="300" height="250" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>';
         var wrapper = document.getElementById('adform-outstream');
         wrapper.insertAdjacentHTML('beforebegin', iframe);
    
         var setup = document.createElement('script');
         setup.setAttribute("type","text/javascript");
         setup.setAttribute("src", 'http://some.adserver.url?id=12345'');
         setup.setAttribute("async", true);
         setup.setAttribute("defer", true);
    
         var intID = setInterval(function(){
           var doc = document.getElementById('adform-outstream-fallback').contentWindow.document;
           var docbody = doc && doc.body;
           if (docbody) {
             clearInterval(intID);
             docbody.appendChild(setup);
             doc.open();
           }
         }, 25);
       }
     })(window, document, (Adform = window.Adform || {}));
    </script>
    <div id="adform-outstream" style="height:0;overflow:hidden;">
      <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js"
        data-pmp-id="*****"> 
      </script>
    </div>

    NOTE: passback parameters must be customized accordingly (url, expected passback banner dimensions).

  • Publisher click tracking

    In order to add click tracking on publisher side, please add your click tracking macro as in example below:

      <div id="adform-outstream" style="height:0;overflow:hidden;">
        <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js?click=${CLICK_URL}"
          data-vast-id="5386383">
        </script>
      </div>

    currently works only with data-vast-id parameter