JSFiddle - React, Tailwind, and code Playground

by Nikolay Vasilchuk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js"></script>
<div class="wrap">
<video class="video"></video>
</div>

CSS

.wrap {
  width: 480px;
  height: 270px;
}
.video {
  width: 100%;
  height: 100%;
}

JavaScript

require.config({
    "paths": {
        "adman": "//ad.mail.ru/static/admanhtml/2.1.17/rbadman-html5.min"
    }
});



require(['adman'], function() {
  function onReady() {
    adm.start('preroll');
  }
  
  function onStarted(sectionType, settings) {
    console.log('Started', sectionType, settings);
  }
  
  function onError() {
		console.warn('Ad error', arguments);
  }
  
  function onClicked() {
	  console.log('Click');
  }
  
  function onCompleted() {
  	console.log('Completed');
  }

	var videoEl = document.querySelector('video');
  var adm = new AdmanHTML();
  adm.onReady(onReady);
  adm.onStarted(onStarted);
  adm.onError(onError);
  adm.onClicked(onClicked);
  adm.onCompleted(onCompleted);
  adm.init({
    slot: '690',
    wrapper: document.querySelector('.wrap'),
    videoEl: videoEl,
    params: {
      'user': '',
      'ok_id': '',
      '_SITEID': 163,
      'duration': 90,
      'content_id': 0,
      'preview': 7,
      'flash': 0
    },
    browser: {'adBlock': false}
  });
});