Triggering a counter in and outside of A-Frame

Question

I have a project within A-Frame that records how many unique Vimeo videos are played. This works well, however, as a safety measure, we want to also add the ability for users to view the embedded Vimeo videos outside the scope of the A-Frame and on the HTML page.

EDIT Here is a CodePen example as Snippets prevent Vimeo videos from loading: CodePen Example

var counterText = document.getElementById('counter-text');
var currentCount = parseInt(counterText.innerText.split('/')[0]);
var maxCount = parseInt(counterText.innerText.split('/')[1]);

// Resets counter on page load to prevent not counting videos. This is only for the testing.
window.onload = function() {
localStorage.removeItem('playedVideos');
}

// Function to append Vimeo video
  function appendVideo(videoUrl) {
    var videoContainer = document.getElementById('video-container');
    // Remove existing video
    videoContainer.innerHTML = '';

    // Create iframe for new video
    var iframe = document.createElement('iframe');
    iframe.src = videoUrl;
    iframe.width = '640';
    iframe.height = '360';
    iframe.frameBorder = '0';
    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
    iframe.allowFullscreen = true;

    // Append the iframe to the video container
    videoContainer.appendChild(iframe);

    // Initialize Vimeo player
    var player = new Vimeo.Player(iframe);

    // Event listener for when the video is played
    player.on('play', function () {
      var videoId = videoUrl.split('/').pop();
      var playedVideos = JSON.parse(localStorage.getItem('playedVideos')) || [];
      if (!playedVideos.includes(videoId)) {
        playedVideos.push(videoId);
        localStorage.setItem('playedVideos', JSON.stringify(playedVideos));
        incrementCounter();
      }
    });

    // Function to increment the counter
    function incrementCounter() {
      // Increment the count if it's less than the max
      if (currentCount < maxCount) {
        currentCount++;
        counterText.innerText = currentCount + '/' + maxCount;
      }
    }
  }

  // Event listeners for each poster
  document.getElementById('poster1').addEventListener('click', function() {
    appendVideo('https://player.vimeo.com/video/841329419?h=44c53926e9');
  });

  document.getElementById('poster2').addEventListener('click', function() {
    appendVideo('https://player.vimeo.com/video/841328109?h=dbb5e5c2af');
  });

  document.getElementById('poster3').addEventListener('click', function() {
    appendVideo('https://player.vimeo.com/video/835600085?h=011251fb10');
  });

  // Initialize counter for video included in HTML
  var videoIframe = document.getElementById('video-iframe');
  var videoIdFromHTML = videoIframe.src.split('/').pop();
  var playedVideosFromHTML = JSON.parse(localStorage.getItem('playedVideos')) || [];
  if (!playedVideosFromHTML.includes(videoIdFromHTML)) {
    playedVideosFromHTML.push(videoIdFromHTML);
    localStorage.setItem('playedVideos', JSON.stringify(playedVideosFromHTML));
    incrementCounter();
  }

  // Function to increment the counter
  function incrementCounter() {
    var counterText = document.getElementById('counter-text');
    var currentCount = parseInt(counterText.innerText.split('/')[0]);
    var maxCount = parseInt(counterText.innerText.split('/')[1]);
    
    // Increment the count if it's less than the max
    if (currentCount < maxCount) {
      currentCount++;
      counterText.innerText = currentCount + '/' + maxCount;
    }
  }

 <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
 <script src="https://player.vimeo.com/api/player.js"></script>

<!-- Scoring System   -->
<div class="counter-container" id="score"><span id="counter-text" style="font-size:5em">0/3</span></div>
   
<!-- A-Frame Scene  -->
<a-scene embedded style="height:400px;">
  <a-entity look-controls="reverse-mouse-drag: true;" cursor="rayOrigin: mouse; fuse: false" raycaster="objects: .raycastable"></a-entity>  
   
<!-- Posters  -->
  <a-plane id="poster1" position="-4 1 -4"  width="2" height="3" color="#4CC3D9" class="raycastable menu-button"></a-plane>
  <a-plane id="poster2" position="0 1 -4"  width="2" height="3" color="#FFC65D" class="raycastable menu-button"></a-plane>
  <a-plane id="poster3" position="4 1 -4"  width="2" height="3" color="#EF2D5E" class="raycastable menu-button"></a-plane>
</a-scene>
  <div id="video-container"></div>


<iframe id="video-iframe" src="https://player.vimeo.com/video/365084715?h=3ae8abbab0" width="640" height="272" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

My problem is I cannot make the counter work both when within A-Frame and outside A-Frame (in the HTML document). How can this be structured?