HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
31x30
834 Bytes
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 http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.adgebra.in/generic/js/jquery-2.1.3.min.js"></script>
  <title>IJK</title>
  <link rel="shortcut icon" href="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/Main.png"
    type="image/x-icon" />
  <script src="https://www.youtube.com/iframe_api"></script>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      overflow: hidden;
    }

    /* Main Bubble Screen */
    .main__div {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .ul__img {
      position: fixed;
      z-index: 1;
      left: 7%;
      bottom: 110px;
      list-style-type: none;
      animation-name: main_img;
      animation-duration: 3s;
      animation-timing-function: ease;
      animation-direction: alternate;
    }

    .bubble__img {
      position: absolute;
      /* bottom: -215px; */
      cursor: pointer;
      /* width: 130px; */
      animation: bubble__img 1s linear infinite alternate;
    }

    .logo__img {
      position: absolute;
      left: 0px;
      right: 0;
      margin: 0 auto;
      top: 1.7%;
      width: 26%;
      animation: logo 1s ease;
    }

    @keyframes bubble__img {
      from {
        transform: scale(1);
      }

      to {
        transform: scale(1.07);
      }
    }

    .list__items {
      cursor: pointer;
      float: right;
      position: absolute;
      right: -160px;
      top: -20px;
    }

    /* Bubble Screen Animation */
    @keyframes main_img {
      0% {
        opacity: 0;
        left: 110%;
      }

      50% {
        opacity: 1;
        left: 110%;
      }

      100% {
        left: 7%;
      }
    }

    /* Second Screens */

    .second__screens {
      width: 100%;
      height: 100%;
      position: absolute;
      display: none;
      overflow: hidden;
    }

    .second__cross {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 9999999;
    }

    /* Inner Screen One */

    .int_screen__one {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .bg__image {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .int_screen_two {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    @keyframes logo {
      from {
        opacity: 0;
        transform: scale(0);
      }

      to {
        opacity: 1;
        transform: scale(1.0);
      }
    }

    .image__one {
      position: absolute;
      bottom: 10%;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 65%;
      animation: imgOne 2s ease;
    }

    .image__two {
      position: absolute;
      bottom: 25%;
      left: 0;
      right: 50%;
      margin: 0 auto;
      width: 45%;
      animation: imgTwo 2.3s ease;
    }

    .image__three {
      position: absolute;
      bottom: 30%;
      right: 0;
      left: 50%;
      width: 40%;
      margin: 0 auto;
      animation: imgThree 2.6s ease;
    }

    .image__four {
      position: absolute;
      right: 0;
      left: 0;
      margin: 0 auto;
      bottom: 14%;
      width: 85%;
      animation: imgFour 2s ease;
    }

    .image__five {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 90%;
      bottom: 25%;
      animation: imgFive 2s ease;
    }

    .image__six {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 90%;
      bottom: 13%;
      animation: imgSix 2.6s ease;
    }

    .screen__one {
      display: block;
    }

    .screen__two {
      display: none;
    }

    .screen__three {
      display: none;
    }

    @keyframes imgOne {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 0;
        transform: scale(0.4);
      }

      100% {
        transform: translateX(0px) scale(1);
      }
    }

    @keyframes imgTwo {
      0% {
        opacity: 0;
      }

      60% {
        opacity: 0;
        transform: translateX(-50%) scale(0.1);
      }

      100% {
        transform: translateX(0px) scale(1);
      }
    }

    @keyframes imgThree {
      0% {
        opacity: 0;
      }

      70% {
        opacity: 0;
        transform: translateX(50%) scale(0.1);
      }

      100% {
        transform: translateX(0px) scale(1);
      }
    }

    @keyframes imgFour {
      0% {
        opacity: 0;
      }

      60% {
        opacity: 0;
        transform: scale(0.1);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes imgFive {
      0% {
        opacity: 0;
      }

      60% {
        opacity: 0;
        transform: scale(0.1);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes imgSix {
      0% {
        opacity: 0;
      }

      70% {
        opacity: 0;
        transform: scale(0.1);
      }

      100% {
        transform: scale(1);
      }
    }

    /* Responsive video container */
    .video-container {
      position: absolute;
      top: 20%;
      width: 100%;
      padding-bottom: 56.25%;
      overflow: hidden;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 99;
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    @keyframes cta {
      from {
        transform: scale(0);
      }

      to {
        transform: scale(1);
      }
    }
  </style>
</head>

<body>
  <div class="main__div">
    <!-- Bubble Screen -->
    <ul class="ul__img" id="bubbleImage">
      <li class="list__items">
        <img id="closeMain" style="margin: -13px -19px"
          src="https://demo.adgebra.in/custom/demos/ad/mobile/RoyalGanges/VTP_Images/Black_cross.png" />
      </li>
      <li>
        <img id="loadSecondImages" class="bubble__img"
          src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/Main.png"
          onclick="adg_clickTracker(adg_ad_click_url,0)" />
      </li>
    </ul>

    <!-- second Screen -->
    <div id="loadSecondFrame" class="second__screens">
      <img id="closeSecondFrame" src="https://cdn.adgebra.in/generic/images/close_red.png" class="second__cross" />

      <!-- Inner Screen One -->

      <div class="int_screen__one" onclick="adg_clickTracker(adg_ad_click_url,1)">
        <div class="video-container">
          <div id="youtubePlayer"></div>

          <!-- <iframe
              id="youtubeVideo"
              width="560"
              height="315"
              src="https://www.youtube.com/embed/dvDTHjtEEIk?si=7Lg2q8A4jvIE1f56&autoplay=1"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe> -->
        </div>
        <!-- <a href="https://www.youtube.com/watch?v=dvDTHjtEEIk" target="_blank"> -->
        <img class="bg__image" src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/Bg.jpg"
          alt="background image" />
        <img class="logo__img" src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/logo.png" alt="logo" />
        <!-- Screen One -->
        <div class="screen__one" style="position: absolute; width: 100%; height: 100%">
          <img class="image__three" src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/img3.png"
            alt="img 3" />
          <img class="image__two" src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/img2.png"
            alt="img 2" />
          <img class="image__one" src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/img1.png"
            alt="img 1" />
        </div>
        <!-- Screen Two -->
        <div class="screen__two" style="position: absolute; width: 100%; height: 100%">
          <img class="image__four" src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/img4.png"
            alt="img 4" />
        </div>
        <div class="screen__three" style="position: absolute; width: 100%; height: 100%">
          <img class="image__five" src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/img5.png"
            alt="img 5" />
          <img class="image__six" src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/img6.png"
            alt="img 6" />
        </div>
        <img class="cta" style="
                position: absolute;
                left: 0;
                right: 0;
                bottom: 5px;
                display: none;
                margin: 0 auto;
                animation: cta 1.2s ease;
              " src="https://demo.adgebra.in/custom/demos/ad/mobile/IJK/images/cta.png" alt="img 6" />

        <!-- </a> -->

      </div>
    </div>
  </div>


  <!-- ForPR -->
  <iframe id="adg_spice_clicktrackframe" style="display: none;
  z-index: 9999999999;
  width: 0px;
  height: 0px;
  position: fixed;
  top: 0px;
  left: 0px;
  border: none;"></iframe>

  <div id="piggyClickTrack"></div>
  <script src="https://adgebra.co.in/afpf/piggiback.js"></script>





  <script>

    // forPR
    var iosIframe = window.parent.document.getElementById("sparkFrame");
    $("body").on("contextmenu", "img", function (e) {
      return false;
    });

    let player;

    // First Screen
    const closeMainScreen = document.querySelector("#closeMain");
    const closeSecondFrame = document.querySelector("#closeSecondFrame");
    const mainScreen = document.querySelector(".main__div");
    const bubbleImage = document.querySelector("#bubbleImage");
    // Main screen
    const loadSecondImages = document.querySelector("#loadSecondImages");
    const loadSecondFrame = document.querySelector("#loadSecondFrame");
    const screenOne = document.querySelector(".screen__one");
    const screenTwo = document.querySelector(".screen__two");
    const screenThree = document.querySelector(".screen__three");
    const cta = document.querySelector(".cta");

    // Events
    closeMainScreen.addEventListener("click", () => {
      closeScreen();
    });

    closeSecondFrame.addEventListener("click", () => {
      if (player) {
        player.pauseVideo(); // Pause the video if player exists
      }
      closeScreen();
      if (document.fullscreenElement) {
        document.exitFullscreen();
        if (player) {
          player.pauseVideo(); // Pause the video if player exists
        }
      }
    });

    loadSecondImages.addEventListener("click", () => {
      secondScreens();
      opanFullScreen();
    });

    // Functions
    function closeScreen() {
      mainScreen.style.display = "none";
    }

    let shakeEventOccurred = false;

    function secondScreens() {

      // forPR
      iosIframe.style.width = 100 + '%';
      iosIframe.style.height = 100 + '%';
      iosIframe.style.bottom = 0;

      window.parent.document.body.style.overflow = 'hidden';
      bubbleImage.style.display = "none";
      loadSecondFrame.style.display = "block";

      player = new YT.Player("youtubePlayer", {
        height: "315",
        width: "560",
        videoId: "dvDTHjtEEIk", // YouTube video ID
        playerVars: {
          autoplay: 1,
          mute: 0, // 0 means unmuted
        },
        events: {
          onReady: onPlayerReady,
        },
      });

      setTimeout(() => {
        rotateAnimation();
      }, 5000);
      setTimeout(() => {
        cta.style.display = "block";
      }, 2000);
    }

    function rotateAnimation() {
      screenOne.style.opacity = 0;
      screenOne.style.transition = "all 0.6s";
      screenTwo.style.display = "block";
      setTimeout(() => {
        screenOne.style.display = "none";
        screenOne.style.opacity = 1;
      }, 600);
      setTimeout(() => {
        screenTwo.style.opacity = 0;
        screenTwo.style.transition = "all 0.6s";
        screenThree.style.display = "block";
      }, 5000);
      setTimeout(() => {
        screenTwo.style.display = "none";
        screenTwo.style.opacity = 1;
      }, 5600);

      setTimeout(() => {
        screenThree.style.opacity = 0;
        screenThree.style.transition = "all 0.6s";
        screenOne.style.display = "block";
      }, 10000);
      setTimeout(() => {
        screenThree.style.display = "none";
        screenThree.style.opacity = 1;
      }, 10600);
      setTimeout(() => {
        rotateAnimation();
      }, 15000);
    }

    function opanFullScreen() {
      if (loadSecondFrame.requestFullscreen) {
        loadSecondFrame.requestFullscreen();
      } else if (loadSecondFrame.webkitRequestFullscreen) {
        /* Safari */
        loadSecondFrame.webkitRequestFullscreen();
      } else if (loadSecondFrame.msRequestFullscreen) {
        /* IE11 */
        loadSecondFrame.msRequestFullscreen();
      }
    }

    function onPlayerReady(event) {
      event.target.playVideo();
    }



    // forPR
    var adg_ad_click_url = "${ADG_CLICK_URL}##https://www.youtube.com/watch?v=dvDTHjtEEIk";
    adg_ad_click_url = adg_ad_click_url.replace("javascript:adg_clickTracker ('", "");
    adg_ad_click_url = adg_ad_click_url.replace("')", "");

    function adg_clickTracker(url2, flag) {
      var segUrl = '${CLICK_SEGMENT_SCRIPT}';
      var clickUrl = '';

      if (flag) {
        var win = window.open(url2 + "&p6=0&referurl=" + document.Url, '_blank');
        win.focus();
      }

      else {
        var iframe = document.getElementById('adg_spice_clicktrackframe');
        iframe.src = url2.split("&p5")[0] + "&p5=test&p6=1&referurl=" + document.Url;
      }

      if (clickUrl.length > 0 && !(clickUrl == '${CLICK_URL}')) {
        clickUrl = clickUrl.replace('[timestamp]', new Date().getTime());
        var ifrm = document.createElement('iframe');
        ifrm.style.width = 0 + 'px';
        ifrm.style.height = 0 + 'px';
        ifrm.style.border = 0 + 'px';
        ifrm.src = clickUrl;
        document.body.appendChild(ifrm);
      }
    }


  </script>
</body>

</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
689KB
Transfer Size
898KB
Content Size
985.0ms
Dom Content Loaded
1,413.0ms
First Paint
2,630.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