JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<span id="ad1">
</span>
<span id="companion1">
</span>
<button type="button" id="play1">Play</button>
<button type="button" id="pause1">Pause</button>
</div>
<div>
<span id="ad2">
</span>
<span id="companion2">
</span>
<button type="button" id="play2">Play</button>
<button type="button" id="pause2">Pause</button>
</div>
JavaScript
function loadAd(strIDSuffix) {
var strContentPageURL = "http://www.newsinc.com",
iChannelID = 69775;
var eIframe = document.createElement("iframe");
eIframe.scrolling="no";
eIframe.style.overflow = "hidden";
eIframe.style.width = "300px";
eIframe.style.height = "250px";
eIframe.style.border = "0";
document.getElementById("ad" + strIDSuffix).appendChild(eIframe);
eIframe.onload = function()
{
// control memory leaks in IE
eIframe.onload = null;
var bAdStarted = false;
adReady();
function adReady()
{
if (eIframe.contentWindow.spotx_ad)
{
eIframe.contentWindow.spotx_ad.subscribe(function() {
console.log("Ad Loaded!");
// set the volume to mute
eIframe.contentWindow.spotx_ad.setAdVolume(0);
}, "AdLoaded");
eIframe.contentWindow.spotx_ad.subscribe(function() {
console.log("Ad Started!");
bAdStarted = true;
}, "AdStarted");
eIframe.contentWindow.spotx_ad.subscribe(function() {
console.log("Ad Stopped!");
}, "AdStopped");
eIframe.contentWindow.spotx_ad.subscribe(function() {
console.log("Ad Error!");
}, "AdError");
document.getElementById("play" + strIDSuffix)
.addEventListener("click", function()
{
if (bAdStarted)
{
eIframe.contentWindow.spotx_ad.resumeAd();
}
else
{
...