// YouTube video tracking inside a Framer Code Block

// YouTube video ID and title
const videoId = "dQw4w9WgXcQ"; // YouTube video ID
const title = "Superiaia Teaser"; // Video title

// Create the invisible iframe for tracking
const iframe = document.createElement("iframe");
iframe.src = `https://www.youtube.com/embed/${videoId}?enablejsapi=1`;
iframe.width = "0";  // Set iframe width to 0 (invisible)
iframe.height = "0"; // Set iframe height to 0 (invisible)
iframe.style.position = "absolute"; // Position off-screen
iframe.style.top = "0"; // Position off-screen (top)
iframe.style.left = "0"; // Position off-screen (left)
iframe.style.border = "none"; // No border around the iframe
iframe.style.visibility = "hidden"; // Ensure the iframe is hidden
iframe.style.opacity = "0"; // Fully transparent
iframe.style.pointerEvents = "none"; // Prevent any interaction with the iframe

// Append the iframe to the body (it will be invisible)
document.body.appendChild(iframe);

// Wait for the YouTube API to be ready
if (!window.YT || !window.YT.Player) {
  const script = document.createElement("script");
  script.src = "https://www.youtube.com/iframe_api";
  document.body.appendChild(script);
} else {
  initPlayer();
}

// Initialize the player once the API is ready
window.onYouTubeIframeAPIReady = function() {
  initPlayer();
};

function initPlayer() {
  if (!iframe) return;

  const player = new window.YT.Player(iframe, {
    events: {
      onStateChange: function(event) {
        const dataLayer = window.dataLayer || [];

        switch (event.data) {
          case window.YT.PlayerState.PLAYING:
            dataLayer.push({ event: "youtube_play", video_title: title });
            break;
          case window.YT.PlayerState.PAUSED:
            dataLayer.push({ event: "youtube_pause", video_title: title });
            break;
          case window.YT.PlayerState.ENDED:
            dataLayer.push({ event: "youtube_complete", video_title: title });
            break;
          default:
            break;
        }
      },
    },
  });
}