Why this iframe not palying the video

See more:

Javascript

jQuery

HTML5

IFrame

I've used iframe in my html page which contains the base video like this

<iframe id="iframe" poster="this.png" src="https://streamadblocker.com/e/Video_ID" width="750" height="400" allowfullscreen frameborder="0" ></iframe>

and I have other parts of the video as well which I have managed to do like this

<a class="alnk" data-src="https://streamadblocker.com/e/Video_ID">Part 2</a>

but I have not created the links like this one by one additionally I've used JS to read the file which contains all the links or src of the video and create the a tag inside a div something like this

const linkContainer = document.querySelector(".prtd");

fetch('urls.txt')
  .then(response => response.text())
  .then(data => {
    const urls = data.split('\n').filter(Boolean);
    const numVideos = urls.length;

    for (let i = 1; i <= numVideos; i++) {
      const link = document.createElement("a");
      link.className = "alnk";
      link.setAttribute("data-src", urls[i]);
      link.textContent = `Part ${i + 1}`;
      linkContainer.appendChild(link);
    }
  });

The main thing comes here I Now have a problem with the iframe the thing that I did is suppose I have Part 2 and 3 and 4 links of the video are there which contains data-src of the video in anchor tag which has class of ".alnk" and after clicking the Part 2 the iframe which Previoiusly had the base video src should repalce with the src in which part I click. In short when I click the Part 3 it should play the Part 3 in the iframe replacing the base Video. To achieve that i've tried this code of JS

What I have tried:

const videoPlayer = document.getElementById("iframe");
const partLinks = document.querySelectorAll(".alnk");

partLinks.forEach(link => {
  link.addEventListener("click", function() {
    const src = this.getAttribute("data-src");
    videoPlayer.setAttribute("src", src);
    videoPlayer.play();
  });
});

Additionally Using Video element in html it worked as the videos were on my local device but now I have hosted to the other plattform it does not play the video not even the base video then I've used iframe to embedd it

After adding this code it does not play the video on iframe additionally in the browser console it showed this error

Uncaught TypeError: Cannot read properties of undefined (reading 'isActive') at Object._userActivationHandler

Here's the full JS code which I've used In My html

const videoPlayer = document.getElementById("iframe");
const partLinks = document.querySelectorAll(".alnk");

partLinks.forEach(link => {
  link.addEventListener("click", function() {
    const src = this.getAttribute("data-src");
    videoPlayer.setAttribute("src", src);
    videoPlayer.play();
  });
});

Also I am new to JS I don't know errors and things that much If any one Could help I would be very Thankful 
Thank You!