HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

300x250

13.8 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mobile Optimized YouTube Ad</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
    }

    .ad-container {
      width: 300px;
      height: 250px;
      position: relative;
      overflow: hidden;
      background-color: black;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
      pointer-events: none; /* So iframe doesn't interfere with overlay */
    }

    .ad-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      background: transparent;
    }

    .controls {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      display: flex;
      gap: 15px;
      background: rgba(0, 0, 0, 0.5);
      padding: 5px 10px;
      border-radius: 20px;
    }

    .controls button {
      background: transparent;
      border: none;
      font-size: 18px;
      color: white;
      cursor: pointer;
      padding: 0;
    }

    .controls button:hover {
      color: #ddd;
    }
  </style>
</head>
<body>

<div class="ad-container" onclick="window.open(clickTag)">
  <iframe id="youtube-video"
    src="https://www.youtube.com/embed/vsZBIkR1QEA?enablejsapi=1&autoplay=1&mute=1&controls=1&loop=1&playlist=vsZBIkR1QEA"
    title="YouTube video"
    allow="autoplay; encrypted-media"
    allowfullscreen>
  </iframe>

  <div class="ad-overlay"></div>

  <div class="controls">
    <button id="muteBtn" title="Mute/Unmute">🔇</button>
    <button id="pauseBtn" title="Pause/Play">⏸️</button>
  </div>
</div>

<script>
  var clickTag = "https://www.google.com/";

  // Handle clickTag messaging
  function bindEvent(element, eventName, eventHandler) {
    if (element.addEventListener) {
      element.addEventListener(eventName, eventHandler, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + eventName, eventHandler);
    }
  }

  bindEvent(window, 'message', function (e) {
    let message = e.data;
    if (typeof message == 'string' && message.includes('googleclicktag')) {
      if (message.split('_')[0] == 'googleclicktag') {
        clickTag = message.substr(15);
      }
    }
  });

  // YouTube API setup
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtube-video', {
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  function onPlayerReady(event) {
    const muteBtn = document.getElementById("muteBtn");
    const pauseBtn = document.getElementById("pauseBtn");

    muteBtn.onclick = function (e) {
      e.stopPropagation();
      if (player.isMuted()) {
        player.unMute();
        muteBtn.innerText = "🔊";
      } else {
        player.mute();
        muteBtn.innerText = "🔇";
      }
    };

    pauseBtn.onclick = function (e) {
      e.stopPropagation();
      const state = player.getPlayerState();
      if (state === 1) {
        player.pauseVideo();
        pauseBtn.innerText = "▶️";
      } else {
        player.playVideo();
        pauseBtn.innerText = "⏸️";
      }
    };
  }
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

985KB

Transfer Size

3673KB

Content Size

137.0ms

Dom Content Loaded

436.0ms

First Paint

1,784.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests