Неполадка при отображении модального видео iframe при нажатии на одно изображение

Question

Я создал загрузочный модал с встроенным в него iframe. Также у меня есть список новостей с собственным изображением, названием и телом. Идея состоит в том, что всякий раз, когда я нажимаю на конкретное изображение новостей, должен отображаться вышеупомянутый модал с iframe. Каждая новостная статья имеет свой собственный item.youtube, который содержит ссылку на YouTube, поэтому при открытии модального окна должно отображаться определенное видео. Я пытался сделать это, но, похоже, есть проблема: отображается только одно видео, видео youtube из первой статьи (item.youtube), даже когда я щелкаю по изображениям других новостных статей.

Что я должен сделать, чтобы решить эту проблему?

Вот мой HTML:

<div class="paragraph-items" *ngFor="let section of page">

  <section class="news">


    <div class="news-items-wrapper">
      <div class="news-wrapper" *ngFor="let item of section.items">
        <div class="news-item-wrapper">
            <div class="modal" id="myModal">
                <div class="modal-dialog">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                  <div class="modal-content">
                        <iframe width="560" height="315" [src]="item.youtube | youtube" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                  </div> 
                </div>
              </div>
          <a class="thumb" data-toggle="modal" data-target="#myModal" href="#"
             [ngStyle]="{'background-image': 'url(' + item.thumbnail + ')'}">
          </a>
          <div class="info">
            <a class="title" [href]="item.youtube" target="_blank">{{ item.title }}</a>
            <div class="description mt-3" [innerHTML]="item.description"></div>
          </div>
        </div>
      </div>
    </div>

  </section>
</div>