Step 1: Add video and track metrics

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

If this is your first time building a Studio creative, check out the 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

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. Instead of setting the video's source directly, use the Enabler to get the right file URL to use when the ad is serving on Google's ad servers.

Review the sample code below. It does the following:

1. Adds a video element in an HTML file.
2. Loads Studio's Enabler.
3. Creates a function to load the right video URL. When you're testing locally, you can load your local file directly. When the ad is live, you need to use the Enabler to load the video file.
4. Creates a function that sets up the video element and source, then plays the video.
5. Creates a function that waits until the Enabler is initialized, then loads the ad.

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>

Step 2: Add CSS to style your video

Add CSS to set the video element's size and position.

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);
});