Пауза Bootstrap карусель при воспроизведении видео Youtube

Question

Я сделал карусель с изображениями и видео на Youtube.Даже когда видео воспроизводит слайды карусели и когда оно возвращается к видео, оно все еще воспроизводится.

1. Я хочу, чтобы карусель приостанавливалась во время воспроизведения видео и продолжалась, если нажаты стрелки или видео заканчивается.

2. Остановите видео, если оно воспроизводилось и пользователь нажимал на стрелки карусели.

HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">

                        <!-- Indicators -->

                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>

                        </ol>

                        <!-- Wrapper for slides -->

                        <div class="carousel-inner">
                            <div class="item active">
                                <div id="cal01"></div>
                            </div>

                            <div class="item">
                                <div id="cal02"></div>
                            </div>

                            <div class="item">
                                <iframe src="https://www.youtube.com/embed/pFaJqKqQa2E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen id="cal3"></iframe>
                            </div>
                        </div>

                        <!-- Left and right controls -->

                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous</span>
                        </a>

                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>

Как мне этого добиться?Я не смог найти ничего похожего на это.