モーダルで自動再生したyoutubeが閉じても音声が再生されるのを解消したい

前提・実現したいこと

maginificpopupを使ってサイトアクセス時にモーダルウィンドウが開き、youtubeが自動再生するようにしています。

PC、SPともに再生ボタンを押さなくてもサイトにアクセスしたらyoutube再生が始まり、モーダルを閉じたらyoutubeは停止するようにしたいです。

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

自動再生させるためにYoutube IFrame Player APIを使用しているのですが、スマホ（android）だとモーダルの閉じるボタンやモーダル外をクリックしても見た目は消えているのですが、少しすると音声がまた流れ出してしまう現象が解消できません。

該当のソースコード

html
1<div class="movie_section">
2<div id="movie01" class="movie-content-wrap mfp-hide">
3<div id="movie-content01"></div>
4</div>
5</div>

jquery
1var tag = document.createElement('script');
2tag.src = "https://www.youtube.com/iframe_api";
3var firstScriptTag = document.getElementsByTagName('script')[0];
4firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
5
6//YouTubeの埋め込み
7var ytPlayer;
8function onYouTubeIframeAPIReady() {
9	ytPlayer = new YT.Player('movie-content01', {
10		width: 1024,
11		height: 576,
12		videoId: 'ZRCdORJiUgU',
13		events: {
14			'onReady': onPlayerReady,
15		},
16		playerVars: {
17			rel: 0, 
18			modestbranding: 1 
19		}
20	});
21}
22
23function onPlayerReady(event) {
24	event.target.mute(); //音声をミュートに
25	event.target.playVideo(); //動画再生
26}
27$(function() {
28	$.magnificPopup.open({
29		items: {
30			src: '#movie01'
31		},
32		mainClass: 'mfp-fade01',
33		removalDelay: 200
34	});
35}); 
36
37$(function() {
38        //モーダル外をクリックしたら閉じる
39        $('.movie_section,#cboxClose').click(function() {
40            $('.movie_section,#movie-content01,.movie-content-wrap')
41                .fadeOut(300)
42                .removeClass('active');
43
44            //　youtube動画停止（動画URLの削除）
45            $('.mfp-content #movie01 iframe').attr('src', '');
46
47            $('#movie-content01').fadeOut('slow', function() {
48                // オーバーレイを削除
49                $('#movie-content01').remove();
50        });
51    });
52});

ムービーはデモです。

css
1.movie_section {	
2	width: 90%;
3	margin: 0 auto;
4	padding: 0 20px;
5}
6.movie-content-wrap {
7	position: relative;
8	max-width: 1000px;
9	padding-top: 56.25%;
10}
11.movie-content-wrap iframe {
12	position: absolute;
13	top: 0;
14	left: 0;
15	width: 100%;
16	height: 100%;
17}
18.mfp-content {
19	max-width: 1000px;
20	padding-top: 44px;
21}
22.mfp-fade01.mfp-bg {
23	opacity: 0;
24	transition: all 0.2s ease-out;
25}
26.mfp-fade01.mfp-bg.mfp-ready {
27	opacity: 0.7;
28}
29.mfp-fade01.mfp-bg.mfp-removing {
30	opacity: 0;
31}
32.mfp-fade01.mfp-wrap .mfp-content {
33	opacity: 0;
34	transition: all 0.2s ease-out;
35}
36.mfp-fade01.mfp-wrap.mfp-ready .mfp-content {
37	opacity: 1;
38}
39.mfp-fade01.mfp-wrap.mfp-removing .mfp-content {
40	opacity: 0;
41}
42.mfp-bg {
43  top: 0;
44  left: 0;
45  width: 100%;
46  height: 100%;
47  z-index: 1042;
48  overflow: hidden;
49  position: fixed;
50  background: #0b0b0b;
51  opacity: 0.8; }
52
53.mfp-wrap {
54  top: 0;
55  left: 0;
56  width: 100%;
57  height: 100%;
58  z-index: 1043;
59  position: fixed;
60  outline: none !important;
61  -webkit-backface-visibility: hidden; }
62
63.mfp-container {
64  text-align: center;
65  position: absolute;
66  width: 100%;
67  height: 100%;
68  left: 0;
69  top: 0;
70  padding: 0 8px;
71  box-sizing: border-box; }
72
73.mfp-container:before {
74  content: '';
75  display: inline-block;
76  height: 100%;
77  vertical-align: middle; }
78
79.mfp-align-top .mfp-container:before {
80  display: none; }
81
82.mfp-content {
83  position: relative;
84  display: inline-block;
85  vertical-align: middle;
86  margin: 0 auto;
87  text-align: left;
88  z-index: 1045; }
89
90.mfp-inline-holder .mfp-content,
91.mfp-ajax-holder .mfp-content {
92  width: 100%;
93  cursor: auto; }
94
95.mfp-ajax-cur {
96  cursor: progress; }
97
98.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
99  cursor: -moz-zoom-out;
100  cursor: -webkit-zoom-out;
101  cursor: zoom-out; }
102
103.mfp-zoom {
104  cursor: pointer;
105  cursor: -webkit-zoom-in;
106  cursor: -moz-zoom-in;
107  cursor: zoom-in; }
108
109.mfp-auto-cursor .mfp-content {
110  cursor: auto; }
111
112.mfp-close,
113.mfp-arrow,
114.mfp-preloader,
115.mfp-counter {
116  -webkit-user-select: none;
117  -moz-user-select: none;
118  user-select: none; }
119
120.mfp-loading.mfp-figure {
121  display: none; }
122
123.mfp-hide {
124  display: none !important; }
125
126.mfp-preloader {
127  color: #CCC;
128  position: absolute;
129  top: 50%;
130  width: auto;
131  text-align: center;
132  margin-top: -0.8em;
133  left: 8px;
134  right: 8px;
135  z-index: 1044; }
136  .mfp-preloader a {
137    color: #CCC; }
138    .mfp-preloader a:hover {
139      color: #FFF; }
140
141.mfp-s-ready .mfp-preloader {
142  display: none; }
143
144.mfp-s-error .mfp-content {
145  display: none; }
146
147button.mfp-close,
148button.mfp-arrow {
149  overflow: visible;
150  cursor: pointer;
151  background: transparent;
152  border: 0;
153  -webkit-appearance: none;
154  display: block;
155  outline: none;
156  padding: 0;
157  z-index: 1046;
158  box-shadow: none;
159  touch-action: manipulation; }
160
161button::-moz-focus-inner {
162  padding: 0;
163  border: 0; }
164
165.mfp-close {
166  width: 44px;
167  height: 44px;
168  line-height: 44px;
169  position: absolute;
170  right: 0;
171  top: -44px;
172  text-decoration: none;
173  text-align: center;
174  padding: 0 0 18px 10px;
175  color: #FFF;
176  font-style: normal;
177  font-size: 28px;
178  font-family: Arial, Baskerville, monospace; }
179  .mfp-close:hover,
180  .mfp-close:focus {
181    opacity: 0.65; }
182
183.mfp-image-holder .mfp-close,
184.mfp-iframe-holder .mfp-close {
185  color: #FFF;
186  right: -6px;
187  text-align: right;
188  padding-right: 6px;
189  width: 100%; }
190
191.mfp-counter {
192  position: absolute;
193  top: 0;
194  right: 0;
195  color: #CCC;
196  font-size: 12px;
197  line-height: 18px;
198  white-space: nowrap; }
199
200.mfp-arrow {
201  position: absolute;
202  opacity: 0.65;
203  margin: 0;
204  top: 50%;
205  margin-top: -55px;
206  padding: 0;
207  width: 90px;
208  height: 110px;
209  -webkit-tap-highlight-color: transparent; }
210  .mfp-arrow:active {
211    margin-top: -54px; }
212  .mfp-arrow:hover,
213  .mfp-arrow:focus {
214    opacity: 1; }
215  .mfp-arrow:before,
216  .mfp-arrow:after {
217    content: '';
218    display: block;
219    width: 0;
220    height: 0;
221    position: absolute;
222    left: 0;
223    top: 0;
224    margin-top: 35px;
225    margin-left: 35px;
226    border: medium inset transparent; }
227  .mfp-arrow:after {
228    border-top-width: 13px;
229    border-bottom-width: 13px;
230    top: 8px; }
231  .mfp-arrow:before {
232    border-top-width: 21px;
233    border-bottom-width: 21px;
234    opacity: 0.7; }
235
236.mfp-arrow-left {
237  left: 0; }
238  .mfp-arrow-left:after {
239    border-right: 17px solid #FFF;
240    margin-left: 31px; }
241  .mfp-arrow-left:before {
242    margin-left: 25px;
243    border-right: 27px solid #3F3F3F; }
244
245.mfp-arrow-right {
246  right: 0; }
247  .mfp-arrow-right:after {
248    border-left: 17px solid #FFF;
249    margin-left: 39px; }
250  .mfp-arrow-right:before {
251    border-left: 27px solid #3F3F3F; }
252
253.mfp-iframe-holder {
254  padding-top: 40px;
255  padding-bottom: 40px; }
256  .mfp-iframe-holder .mfp-content {
257    line-height: 0;
258    width: 100%;
259    max-width: 900px; }
260  .mfp-iframe-holder .mfp-close {
261    top: -40px; }
262
263.mfp-iframe-scaler {
264  width: 100%;
265  height: 0;
266  overflow: hidden;
267  padding-top: 56.25%; }
268  .mfp-iframe-scaler iframe {
269    position: absolute;
270    display: block;
271    top: 0;
272    left: 0;
273    width: 100%;
274    height: 100%;
275    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
276    background: #000; }