Video in a Modal

When the modal loses focus the video stops playing

When the modal loses focus the video continues to play

https://mdbootstrap.com/snippets/standard/mdbootstrap/6206158?view=side

  <div class="col-lg-4 mb-4 mb-lg-0">
    <div
      class="bg-image hover-overlay ripple shadow-1-strong rounded"
      data-ripple-color="light"
    >
      <img
        src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp"
        class="w-100"
      />
      <a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal2">
        <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
      </a>
    </div>
  </div>

  <div class="col-lg-4 mb-4 mb-lg-0">
    <div
      class="bg-image hover-overlay ripple shadow-1-strong rounded"
      data-ripple-color="light"
    >
      <img
        src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp"
        class="w-100"
      />
      <a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal3">
        <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
      </a>
    </div>
  </div>
</div>

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="ratio ratio-16x9">
        <iframe
          src="https://www.youtube.com/embed/wTcNtgA6gHs"
          title="YouTube video"
          allowfullscreen

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="ratio ratio-16x9">
        <iframe
          src="https://www.youtube.com/embed/vlDzYIIOYmM"
          title="YouTube video"
          allowfullscreen