In-Text: Viewable Mobile Web Autoplay

StreamRail JavaScript SDK

A rich set of client-side functionality for adding video to your website, app, or SSP

The following snippet of code will provide the basic version of a StreamRail creative ad for in-text video banners with viewability.

Simply set the inText node of the player:

copy

<div id="video-container"></div>
<script>
	window.srAsyncInit = function() {
		SR('video-container', {    
			inText: {
	        	adTitle: {
	        		text: 'Advertisement'
	        	}
	        }, 
	        partnerID: 'your-streamrail-api-key',
	        ads: {
	        	schedule: [{
	        		position: 'pre-roll',
	        		server: {
	        			tag: 'https://ssp.streamrail.net/ssp/vast/569fa9ee5fbe690002000001/56a0f360d548da0002000003?page_url=[PAGE_URL]&cb=[CB]&pos=[AD_POSITION]&width=[WIDTH]&height=[HEIGHT]&ip=[IP]&ua=[UA]&video_duration=[VIDEO_DURATION]&video_description=[VIDEO_DESCRIPTION]&video_url=[VIDEO_URL]&video_id=[VIDEO_ID]&video_title=[VIDEO_TITLE]&user_lat=[USER_LAT]&user_lan=[USER_LAN]&autoplay=[AUTOPLAY]&mute=[MUTE]&dnt=[DO_NOT_TRACK]'
	        		}
	        	}]
	        },
	        scaleMode: 'original',
	        autoplay: true,     
			bgColor: 'transparent'
	    });
	};
	(function(d, s, id){
		var js, srjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) {return;}
		js = d.createElement(s); js.id = id;
		js.src = 'https://sdk.streamrail.com/player/sr.ads.js';
		srjs.parentNode.insertBefore(js, srjs);
	}(document, 'script', 'streamrail-jssdk'));
</script>

Live Preview

Open this link on a mobile device.

Let's Break Down This Example

In this example, we'll pick a sample article and inject it with an in-text video banner unit that supports viewability. The design of the placement can be controlled with HTML/CSS, but the default ad type contains configurable parameters that cover most cases.

How-to:

  • Put the following code on a demo HTML page.
  • Open this page on a mobile device, or use your browser's device emulator.
  • Scroll down slowly until you see the video pop out of the text.


  • Let's note a couple of things about this setup:

    • We have specified the inText attribute and have chosen to configure its text ("Advertisement").
    • We have set scaleMode: 'original'. This setting allows the video to maintain its original aspect ratio, even if it's embedded inside a container with different dimensions (such is the case in some text articles). Try to remove the scaleMode parameter to see what happens. (Spoiler: the video will be stretched to accomodate the entire article's width.)
    • We have set bgColor: 'transparent', which makes the video's background transparent (as opposed to the default black) and makes it blend in better with text articles.

    In-Text Viewability

    When integrating an in-text video banner, we are concerned about the following:

    • We want the video to show up only once the user has scrolled onto a position that would make the video viewable. Until then, the article/text should not be injected with the video banner.
    • After the video ad has begun, we want to implement auto-pause capabilities in case the user scrolls out of view. This feature is highly important in terms of viewability.
    • When the video ad is done, we want to dispose of the player to release unneeded memory.

    Configure the Player for In-Text

    Simply set the inText attribute. The inText object is structured like so:
    Property Type Default Description
    adTitle object {text: 'Advertisement'} Change the title's text
    border object {show: false} Contain the ad unit inside a visible border
    controls bool false Show video player controls