Outstream In-View Video Format


OutStream In-View banner is usually implemented between website content. 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.

Test Tag:

  <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">
    </script>
  </div>
  

Additional parameters:

Smart Insert

If publisher does not have a specific placement OutStream should be rendered into, "smart insert" feature comes to the rescue.

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>
  <!-- OutStream tag -->
  

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


Configuration:

    <script>
        (function(window, document) {
            window.ADFSlot = function() {
                var doc = window.top.document;
                var el = doc.querySelectorAll('#articleText > p');
                var insertion = 'near-fold'; // or 'middle'
                return {
                    paragraphs: el,
                    insertion: insertion
                };
            }
        })(window, document);
    </script>
    

Live examples: Example #1 | Example #2

Adding Ad Notice

Use callbacks to add Ad Notice above and below OutStream banner.
NOTE: styling of Ad Notice can be easily customized by adding certain classes and/or styles.

  <script type="text/javascript">
    (function(window, document, Adform){
        window._adform = window._adform || [];
        _adform.push(['on.init', function (settings) {
            this.on('expand', onExpand);
            this.on('collapse', onCollapse);

            var lib = Adform.lib,
                element = this.container.get('element'),
                positions = []
            ;

            var collapseTimeout = settings.options.hideTime * 1000;

            function onExpand() {
                addNotice(element, 'beforebegin');
                addNotice(element, 'afterend');
            }

            function onCollapse() {
                setTimeout(function() {
                    for (var i = 0; i < positions.length; i++) {
                        document.getElementById('adform-adnotice-' + positions[i]).style.display = 'none';
                    }
                }, collapseTimeout);
            }

            function addNotice(el, where) {
                var title = 'Advertisement';
                var style = 'pointer-events:none;text-align:center;font-family:Arial,Verdana,Helvetica,sans-serif;font-size:10pt;';
                var html = '<p id="adform-adnotice-' + where + '" style="'+style+'">'+title+'</p>';
                positions.push(where);
                el.insertAdjacentHTML(where, html);
            }

        }]);
    })(window, document, (Adform = window.Adform || {}));
  </script>
  <!-- OutStream tag -->
  

Live example: Example #1