when changing video source, downloading starts automatically before streaming

I have a bootstrap modal contains a video that appears when click on play button

-code:

<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="showModal" aria-hidden="true"
  data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">

      <i data-bs-dismiss="modal" aria-label="Close" class="bi bi-x-lg btn-close" (click)="closeIframe()"></i>

      <div class="modal-body">
        <video class="show-video" controls crossorigin="" autoplay="" id="player" [src]="source" __idm_id__="3612673">
          <source [src]="source" type="video/mp4">
        </video>
      </div>

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

this play button when clicked it calls back a function sending the streaming link as a parameter

-button code:

<button (click)="playIframe(show.stream)" class="btn btn-success play" type="submit" *ngIf="show.stream != ''"
          data-bs-toggle="modal" data-bs-target="#showModal"><i class="bi bi-play-fill"></i>
          Watch Now</button>

-playIframe code:

 playIframe(_source: string) {
    this.source = _source;
  }

and when closing the modal I call back another function that change the variable "source" to empty string so I can stop the video.

-Problem: what happens is everything is going ok but when I click the play button a downloading -of the video- starts automatically before streaming starts

I want to stop downloading, only streaming.

Thanks.