非表示display:noneの際のYoutubeIframeAPIがうまくいかない

Youtubeを２つ用意しW769以上は①を、768W以下は②を表示するようにしています。
２つともミュートの自動再生で、例えばW769以上で①の音を手動で出し、
サイズをW768以下に変更したら①はミュートになるようにしたくコード書きました。
以下の挙動があり、解決策を探っています。
何か問題、ご提案あればご教授いただけると幸いです。

問題１
Ipad実機（safari、Chrome）
初期のサイズで表示される動画はミュートの自動再生なのですが
そこからサイズを変え(縦横のデバイスの向き)①②の表示非表示が入れ替わると新たに表示された方は動画が再生されず、再生してもミュートにはなっていません。
ミュートになっていないから自動再生されていないのでしょうか。

問題２
Android（Chrome）、PCデベロッパーツールでのIpadやIphone（Chrome）
他ページから動画のページに遷移すると非表示のPC用動画①の音が出る（リロードすると音はならない）

いずれにしろ非表示の方のYoutubeがうまく動きません、、

HTML
1<section class="top">
2  <div class="top__yt"><div id="js-player"></div></div>
3</section>
4<section class="top-pr tb_show">
5  <div class="top-pr__yt"><div id="js-player2"></div></div>
6</section>

CSS
1.tb_show{
2  display: none;
3}
4.top__yt,.top-pr__yt {
5  position: relative;
6  width: 100%;
7  padding-top: 56.25%;
8}
9.top__yt #js-player,
10.top-pr__yt #js-player2{
11  position: absolute;
12  top: 0;
13  right: 0;
14  width: 100% !important;
15  height: 100% !important;
16}
17@media (max-width: 768px){
18  .tb_show{
19    display: block;
20  }
21  .top__yt{
22    display: none;
23  }
24}

js
1      $("body").append('<script src="https://www.youtube.com/iframe_api">');
2      let ytPlayer =[];
3      var ytData = [
4        {
5          area: 'js-player'
6        }, {
7          area: 'js-player2'
8        }
9      ];
10
11      setTimeout(function onYouTubeIframeAPIReady() {
12
13        for(var i = 0; i < ytData.length; i++) {
14        ytPlayer[i] = new YT.Player(
15        ytData[i]['area'],
16          {
17            videoId: "YouTube ID",
18            playerVars: {
19              loop: 1,
20              autoplay: 1,
21              rel: 0,
22              controls: 1,
23              modestbranding: 1,
24              widgetid: 1,
25              playsinline: 1, // スマホでも自動再生
26              showinfo: 0
27            },
28            events: {
29              onReady: onPlayerReady,
30              onStateChange: onPlayerStateChange,　// プレーヤーの再生、一時停止、終了したとき
31            },
32          });
33          function onPlayerReady(event) {
34            event.target.mute();
35            event.target.playVideo();
36          }
37          function onPlayerStateChange(event) {
38            if (event.data == YT.PlayerState.ENDED) {
39              event.target.playVideo();
40            }
41          }
42          $(window).on('resize', function() { //リサイズ時
43            var windowWidth = window.innerWidth;
44
45            if (windowWidth > 768) {
46              ytPlayer[1].mute();
47              ytPlayer[0].playVideo();
48            } else{
49              ytPlayer[0].mute();
50              ytPlayer[1].playVideo();
51            }
52          });
53        }
54      }, 800);