ybootin/index.html

## index.html
<!doctype html>
<html>
  <head>
      <title>VPAID Adapter test page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <h1>Google ima - Click Tracking with custom click element debug page</h1>
      <div class="form-group">
        VAST url : <input type="text" style="min-width:100%" value="https://a.teads.tv/vast/get/1550" id="vast-url" class="form-control"><br />
        click element : <input type="radio" value="normal" name="clickelement" id="clickelementcustom" checked> <label for="clickelementcustom"> custom </label>
        <input type="radio" value="normal" name="clickelement" id="clickelementnormal"> <label for="clickelementnormal"> default </label><br />
        <br /><input type="button" value="run VAST" id="run-vast">
      </div>
      <hr>
      <div id="main-container" style="position:relative;min-width:300px;min-height:200px">
        <video muted playsinline webkit-playsinline width="300px" height="200px"></video>
        <div id="ad-container" style="position:relative;width:300px;height:200px;position:absolute;top:0;left:0"></div>
      </div>
    </div>
    <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script>
      var videoContent = document.getElementsByTagName('video')[0]
      var container = document.getElementById('ad-container')

      function loadVast(vastUrl, useCustomClick) {
        container.innerHTML = ''

        var clickElement

        if (useCustomClick) {
          clickElement = document.createElement('div')
          clickElement.style.position = 'absolute'
          clickElement.style.zIndex = '10'
          clickElement.style.top = '0'
          clickElement.style.left = '0'
          clickElement.style.width = '100%'
          clickElement.style.height = '100%'
          clickElement.style.cursor = 'pointer'

          container.appendChild(clickElement)
        }

        var adDisplayContainer = new google.ima.AdDisplayContainer(container, videoContent, clickElement);
        adDisplayContainer.initialize();

        var adsLoader = new google.ima.AdsLoader(adDisplayContainer);

        adsLoader.getSettings().setDisableCustomPlaybackForIOS10Plus(true)

        var onAdsManagerLoaded = function(adsManagerLoadedEvent) {
          var adsManager = adsManagerLoadedEvent.getAdsManager(videoContent);

          adsManager.init(300, 200, 'normal')
          adsManager.start()
        }

        adsLoader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, onAdsManagerLoaded, false);

        var adsRequest = new google.ima.AdsRequest();
        adsRequest.adTagUrl = vastUrl
        adsLoader.requestAds(adsRequest);
      }

      document.getElementById('run-vast').addEventListener('click', function() {

        loadVast(document.getElementById('vast-url').value.trim(), document.getElementById('clickelementcustom').checked)
      })

    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>VPAID Adapter test page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	</head>
	<body>
	<div class="container">
	<h1>Google ima - Click Tracking with custom click element debug page</h1>
	<div class="form-group">
	VAST url : <input type="text" style="min-width:100%" value="https://a.teads.tv/vast/get/1550" id="vast-url" class="form-control"><br />
	click element : <input type="radio" value="normal" name="clickelement" id="clickelementcustom" checked> <label for="clickelementcustom"> custom </label>
	<input type="radio" value="normal" name="clickelement" id="clickelementnormal"> <label for="clickelementnormal"> default </label><br />
	<br /><input type="button" value="run VAST" id="run-vast">
	</div>
	<hr>
	<div id="main-container" style="position:relative;min-width:300px;min-height:200px">
	<video muted playsinline webkit-playsinline width="300px" height="200px"></video>
	<div id="ad-container" style="position:relative;width:300px;height:200px;position:absolute;top:0;left:0"></div>
	</div>
	</div>
	<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
	<script>
	var videoContent = document.getElementsByTagName('video')[0]
	var container = document.getElementById('ad-container')

	function loadVast(vastUrl, useCustomClick) {
	container.innerHTML = ''

	var clickElement

	if (useCustomClick) {
	clickElement = document.createElement('div')
	clickElement.style.position = 'absolute'
	clickElement.style.zIndex = '10'
	clickElement.style.top = '0'
	clickElement.style.left = '0'
	clickElement.style.width = '100%'
	clickElement.style.height = '100%'
	clickElement.style.cursor = 'pointer'

	container.appendChild(clickElement)
	}

	var adDisplayContainer = new google.ima.AdDisplayContainer(container, videoContent, clickElement);
	adDisplayContainer.initialize();

	var adsLoader = new google.ima.AdsLoader(adDisplayContainer);

	adsLoader.getSettings().setDisableCustomPlaybackForIOS10Plus(true)

	var onAdsManagerLoaded = function(adsManagerLoadedEvent) {
	var adsManager = adsManagerLoadedEvent.getAdsManager(videoContent);

	adsManager.init(300, 200, 'normal')
	adsManager.start()
	}

	adsLoader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, onAdsManagerLoaded, false);

	var adsRequest = new google.ima.AdsRequest();
	adsRequest.adTagUrl = vastUrl
	adsLoader.requestAds(adsRequest);
	}

	document.getElementById('run-vast').addEventListener('click', function() {

	loadVast(document.getElementById('vast-url').value.trim(), document.getElementById('clickelementcustom').checked)
	})

	</script>
	</body>
	</html>