amp-ima-video

Edit on Github
Open in Playground

Experimental Mode

This example uses the following experimental feature: [amp-ima-video]. Enable the experiment via the button below. Some components require the AMP Dev Channel to be enabled as well. Learn more here.

Enable Dev Channel

Introduction

amp-ima-video embeds a video player for instream video ads that are integrated with the IMA SDK.

The plugin provides a video player with controls for your content, and requests and displays ads from a VAST-compliant ad server of your choice using the IMA SDK.

Setup

Import the amp-ima-video component.

<script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js"></script>

Basic Usage

The amp-ima-video component HTML accepts up to two unique types of HTML nodes as children - source tags for content video, and track tags for subtitles. Both of these can be used in the same way as the standard video tag.

The component requires an ad tag, provided in data-tag, which is a URL to a VAST-compliant ad response (for examples, see IMA Sample Tags). It has an optional data-poster attribute for a poster image to be displayed before playback.

Example

<amp-ima-video id="myVideo"
  width="640"
  height="360"
  layout="responsive"
  data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="

  data-poster="https://ampbyexample.com/img/ima-poster.jpg">
  <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4"
    type="video/mp4">
</amp-ima-video>