Как остановить автоматическое воспроизведение видео на YouTube?

Question

У меня есть встроенное видео iframe на YouTube, которое воспроизводится автоматически при нажатии. Теперь я должен остановить это автоматическое воспроизведение видео iframe, нажимая кнопку снаружи (окно) или кнопку закрытия. Я пробовал несколько вещей, но оба сценария не работают вместе, например, если видео остановится, автозапуск не будет работать, и наоборот. Ниже приведен мой код.

// Это тот случай, когда видео останавливается при щелчке снаружи, но автозапуск не работает

<div id="modalVideo" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                                <img alt="Brand" src="{{ 'logo@2x.png' | asset_url }}" height="20">
                            </div>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" width="560" height="315"
                                    src="https://www.youtube.com/embed/aqkGCzcx34A?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1"
                                    frameborder="0"
                                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>

<script>
$(window).click(function () {
        $('.embed-responsive-item')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
</script>

// Это тот случай, когда автозапуск работает, но видео не останавливается

<div id="modalVideo" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                                <img alt="Brand" src="{{ 'logo@2x.png' | asset_url }}" height="20">
                            </div>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" width="560" height="315"
                                    src="https://www.youtube.com/embed/aqkGCzcx34A?autoplay=1"
                                    frameborder="0"
                                    allow="autoplay"
                                    allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>

<script>
$(window).click(function () {
        $('.embed-responsive-item')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
</script>

Пожалуйста, помогите мне, если вы, ребята, столкнулись с подобной ситуацией или проблемой.