Vue

by fraMussi

HTML

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<div id="app">
  <div id="mainContainer">
    <div id="content">
      <video ref="contentElement">
        <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
      </video>
    </div>
    <div ref="adContainer"></div>
  </div>
  <button ref="playButton">Play</button>
</div>

CSS

#mainContainer {
  position: relative;
  width: 100x;
  height: 60px;
}

#content, #adContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 60px;
}

#contentElement {
  width: 100px;
  height: 60px;
  overflow: hidden;
}

#playButton {
  margin-top:10px;
  vertical-align: top;
  width: 350px;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2c3e50;
  border: 0;
  border-bottom: 2px solid #22303f;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #22303f;
  box-shadow: inset 0 -2px #22303f;
}

Vue

new Vue({
  el: "#app",
  data: {
    adDisplayContainer: null,
    playButton: null,
    videoContent: null,
  },
  mounted() {
    this.videoContent = this.$refs.contentElement;
    this.playButton = this.$refs.playButton;
    this.playButton.addEventListener('click', this.playAds);
    this.setUpIMA();
},
watch: {
  adDisplayContainer: {
    handler: function (val, oldVal) { 
      console.warn('adDisplayContainer modified')
      console.log({val})
      console.log({oldVal})
      },
    deep: true
  },
},
methods: {
  setUpIMA() {
    console.log('setUpIMA')
    // Create the ad display container.
    this.createAdDisplayContainer();
  },
  createAdDisplayContainer() {
    console.log('createAdDisplayContainer')
    // We assume the adContainer is the DOM id of the element that will house
    // the ads.
    this.adDisplayContainer = new google.ima.AdDisplayContainer(
        this.$refs.adContainer, this.videoContent);
    console.log('adDisplayContainer', this.adDisplayContainer)
  },
  playAds() {
    console.log('playAds')
  },
}
})