JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">frameAContainer</div>
<a href="javascript:void(0);" class="change">実行</a>

CSS

body {
  text-align:center;
}
#box {
  background: #ccc;
  width: 200px; height: 100px;
  line-height: 100px;
  margin: 0 auto;
}
.loader {
  position: absolute;
  top :0; right: 0; left: 0; right: 0;
  z-index:0;
}
.iframe {
  position: relative;
  z-index: 1;
}

JavaScript

$(function() {
  // 実行
  $('.change').click(function() {
    var url = "https://www.youtube.com/embed/6sUM254lAfg";
    $('#box').html('<div class="loader">読み込み中です</div>');

    $.when(
      iFrameLoaded("box", url)
    ).then(function() {
      console.log("All iframes loaded");
      $('.loader').remove();
    });  
    
  });
});

function iFrameLoaded(id, src) {
  var deferred = $.Deferred();
  var iframe = $("<iframe></iframe>").attr({
      "id": id,
      "src": src
    });

  iframe.on('load', deferred.resolve);
  iframe.appendTo("#" + id);

  deferred.done(function() {
    console.log("iframe loaded: " + id);
  });

  return deferred.promise();
}