HTML5 video build guide: Standard video module

Step 1: Add video and add tracking metrics

You can add a video to any Studio creative. The best way to add one is by using the HTML5 <video> tag.

If you're unfamiliar with building Studio creatives, see HTML5 creative build guides.

Add a video to a creative

Create a video element in a creative by adding the video tag to your HTML file. Assign an ID to your element, for example, video1. Set the video's position and size using CSS. Then add a unique reporting identifier to the video so you can match up the metrics with the video in campaign reports.

Step 1: Add a video element and JavaScript

Sample <video> tag with JavaScript

<video id="video1" muted playsinline></video>

<script src="https://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script>
<script type="text/javascript">
  (function() {
    function getVideoUrl(filename) {
      if (Enabler.isServingInLiveEnvironment()) {
        return Enabler.getUrl(filename);
      } else {
        return filename;
      }
    }

    function initAd() {
      var video = document.getElementById("video1");

      var source = document.createElement('source')
      source.setAttribute('type', 'video/webm; codecs=vp9')
      source.setAttribute('src', getVideoUrl('video.webm'))
      video.appendChild(source);

      video.play();
    }

    window.onload = function() {
      var isInitialized = Enabler.isInitialized();
      isInitialized ? initAd() : Enabler.addEventListener(studio.events.StudioEvent.INIT, initAd);
    }
  }());
</script>
Notes
  • A video tag is an HTML5 element and isn't part of the Studio Enabler. For more information see HTML5 <video> tag.
  • The playsinline attribute plays the video inside the banner on iOS, instead of playing the video in fullscreen mode. For the best consumer experience, we recommend always including this attribute.

Step 2: Add CSS to style your video

Add CSS to set the size and position your video.

Sample styling and ID selector in your CSS file

#video1 {
  position: absolute;
  width: 205px;
  height: 154px;
}

Step 3: Add a reporting identifier

Track video metrics by loading the Enabler’s Video module and attaching a reporting identifier. This is used to help you match the reporting metrics with the right video in campaign reports and see how long people watched the video when viewing the live ad.

var video1 = document.getElementById('video1');

Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
  studio.video.Reporter.attach('video_1', video1);
});
Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue

Search
Clear search
Close search
Google apps
Main menu
Search Help Center
true
74220
false