同一ページ内の再読み込み処理

お世話になります。

構成としてはタブコンテンツがあり、タブはそれぞれiframeの動画プレイヤーが入っています。
これらはjsで表示制御されており、タブを押すと該当の動画プレイヤーが表示切り替えされている状態です。
しかし、iframe同時に読み込むと時間が掛かってしまうため、タブを押下したタイミングで必要なiframeだけ読み込むようにしたいです。この場合ajax等が考えられるのでしょうか。

ページをリロードしするイメージでそれぞれ読み替える処理が理想なのですが、発想が貧困で解決方法が分かりません。何か良い方法はあるでしょうか。

<div class="tabbox"><p class="tabs">
  <a href="#tab_1" class="tabMenu" name="tab_1" onclick="ChangeTab(\'tab_1\'); return false;">tab1</a>
  <a href="#tab_2" class="tabMenu" name="tab_2" onclick="ChangeTab(\'tab_2\'); return false;">tab2</a>
  <a href="#tab_3" class="tabMenu" name="tab_3" onclick="ChangeTab(\'tab_3\'); return false;">tab3</a>
 <div id="tab_1" class="tab"><iframe></div>
 <div id="tab_2" class="tab"><iframe></div>
 <div id="tab_3" class="tab"><iframe></div>
</div><!-- tabbox -->

    // タブ制御
    function ChangeTab(tabName) {
       // 全部消す
         if(document.getElementById('tab_1') != null) {
            document.getElementById('tab_1').style.display="none";
         }
         if(document.getElementById('tab_2') != null) {
            document.getElementById('tab_2').style.display="none";
       }
         if(document.getElementById('tab_3') != null) {
            document.getElementById('tab_3').style.display="none";
       }

       // 指定箇所のみ表示
       var e = document.getElementById(tabName);
       e.style.display="block";

       // カレントタブ制御
       var tabs = document.getElementsByClassName("tabMenu");
       for(var i=0; i<tabs.length; i++) {
          tabs[i].classList.remove("active");
       }

       document.getElementsByName(tabName)[0].classList.add("active");
};