youtube背景動画をスマートフォンでも表示する（YouTube IFrame Player API）

前提・実現したいこと

wordpressのonetoneというテーマでホームページを作成しています。
そこで、スマートフォンでも背景動画としてyoutube動画を自動再生したいを考えています。

発生している問題

https://www.non-standardworld.co.jp/12814/
上記を参考に作成（コピペですが）
テストでは自動再生するのですが、実際にwordpressにアップすると動画の画面も現れず再生されない
再生できない環境用に設定している静止画が表示されます。

該当のソースコード

html
1<div id="visual_header" class="background">
2  <div class="background-wrap">
3    <div class="background-movie">
4      <div id="background-movie-player"></div>
5    </div>
6  </div>
7</div>

css
1.background {
2  background: url(***.jpg) no-repeat center center;
3  background-size: cover;
4  position: relative;
5  z-index: -2;
6  width: calc(100vh * 1.78);
7  height: 100vh;
8  margin: 0 auto;
9            
10  .background-wrap {
11    position: relative;
12    top: 0;
13    left: 0;
14    z-index: -1;
15    min-width: 100%;
16    min-height: 100%;
17    overflow: hidden;
18    .background-movie {
19      position: relative;
20      display: flex;
21      justify-content: center;
22    }
23    #background-movie-player {
24      width: calc(100vh * 1.78);
25      height: 100vh;
26      flex: none;
27    }
28  }
29}

js
1// YouTube IFrame Player API の読み込み
2var tag = document.createElement('script');
3tag.src = "https://www.youtube.com/iframe_api";
4var firstScriptTag = document.getElementsByTagName('script')[0];
5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
6
7// YouTubeの埋め込み
8var ytPlayer;
9function onYouTubeIframeAPIReady() {
10  ytPlayer = new YT.Player('background-movie-player', {
11            videoId: '2ZBTVjhKr5E',
12            playerVars: { 
13                'autoplay': 1,
14                'controls': 0,
15                'enablejsapi': 1,
16                'iv_load_policy': 3,
17                'disablekb':1,
18                'showinfo':0,
19                'rel':0,
20                'start': 5,
21                'modestbranding': 1
22            },
23      events: {
24        'onReady': onPlayerReady,
25        'onStateChange': onPlayerStateChange,
26        'onError': onPlayerError
27      }
28    }
29  );
30}
31
32
33
34
35// プレーヤーの準備ができたとき
36function onPlayerReady(event) {
37  // 動画をミュートにする
38  const player = event.target;
39  player.mute();
40  player.playVideo();
41}
42
43// onStateChangeのコールバック関数
44function onPlayerStateChange(event) {
45  var status = event.data;
46  var playerWrap = $('#header .background-wrap');
47  var names = {
48    '-1' : '未開始',
49    '0' : '終了',
50    '1' : '再生中',
51    '2' : '停止',
52    '3' : 'バッファリング中',
53    '5' : '頭出し済み'
54  };
55  //バッファリングの完了後、動画背景を表示させる
56  if (status == 1) {
57    $(playerWrap).css('opacity','1');
58  } else {
59    $(playerWrap).css('opacity','0');
60  }
61}
62
63// errorの発生時
64function onPlayerError(event) {
65  var errorstatus = event.data;
66  var playerWrap = $('#header .background-wrap');
67  //何らかのエラーステータスが渡された場合、youtubeプレイヤーを削除する
68  if (errorstatus !== '') {
69    $(playerWrap).remove();
70  }
71}