MutationObserverdeでiframeの挿入を監視したい

前提・実現したいこと

YouTubeの埋め込み完了後にアラートを出したいです。
(実装としてはアラートでなく「読み込み中です」の.loaderを削除したいです。)

発生している問題・エラーメッセージ

MutationObserverが順番通りに動きません。

エラーメッセージはありません。

該当のソースコード

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

css
1body {
2  text-align:center;
3}
4#box {
5  background: #ccc;
6  width: 200px; height: 100px;
7  line-height: 100px;
8  margin: 0 auto;
9}
10.loader {
11  position: absolute;
12  top :0; right: 0; left: 0; right: 0;
13  z-index:0;
14}
15.iframe {
16  position: relative;
17  z-index: 1;
18}

js
1// 実行
2$('.change').click(function() {
3  var url = "https://www.youtube.com/embed/6sUM254lAfg";
4  var iframe = '<iframe src="'+url+'"></iframe>';
5  $('#box').html('<div class="loader">読み込み中です</div>');
6  $('#box').append(iframe);
7});
8
9// 対象ノード
10const target = document.getElementById('box');
11
12// オブザーバーインスタンス準備
13const observer = new MutationObserver((mutations) => {
14  alert('完了'); // 実装としてはここで.loaderを削除したい
15});
16
17// オブザーバーの監視対象の設定
18const config = {
19  childList: true
20};
21
22//対象と設定を渡す
23observer.observe(target , config);
24
25

試したこと

同じ流れでデータ属性の変更は以下の通りできました。
ということはまさか、iframeはMutationObserverで監視できないのでしょうか。

js
1// 実行
2$('.change').click(function() {
3  color = '#'+Math.floor(Math.random()*16777215).toString(16);
4  $('#box').css('background', color);
5});
6
7// 対象ノード
8const target = document.getElementById('box');
9
10// オブザーバーインスタンス準備
11const observer = new MutationObserver((mutations) => {
12  alert('完了');
13});
14
15// オブザーバーの監視対象の設定
16const config = {
17  attributes: true 
18};
19
20//対象と設定を渡す
21observer.observe(target , config);
22