I need help with upstream Bootstrap 4 issue that affects all MDB. Then the specifics of how to fix in Angular if it's implicated in fix.

Expected behavior

Expect all src to load as it does with documented video examples, and to display.

I'm trying to display remote content that contains JS, and it seems there is a race condition between the iframe loading its JS content and the modal JS dynamically displaying the content before it's fully loaded. Thanks in advance!

Actual behavior

Many non-video src don't load. Modal opens empty. To display content must either reload entire modal or trigger src load from within modal.

It was suggested to me that I change to an empty iframe without a src attribute and when the shown.bs.modal event is triggered (bootstrap modal event) then set the source for the iframe, causing it to load after the modal is visible.

Resources (screenshots, code snippets etc.)

Problem seems upstream in Bootstrap 4 - can be replicated without MDB, as follows from file with CDN for Bootstrap 4 CSS and JS:

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch modal</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe src="https://enactx.h5p.com/content/1291061974592833598/embed" 
        width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" 
        allow="geolocation *; microphone *; camera *; midi *; encrypted-media *">
    </iframe><script src="https://enactx.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS @CDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

JS @CDN

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>