Como parar Autoplaying vídeo iframe youtube?

votos
0

Eu tenho um vídeo do youtube iframe encaixado, que seja Autoplaying no clique. Agora, eu tenho que parar este iframe vídeo Autoplaying enquanto clica no exterior (janela) ou botão de fechar. Eu tentei várias coisas, mas ambos cenário não está trabalhando em conjunto, como se o vídeo iria ficar parar então, autoplay não vai funcionar e vice-versa. A seguir é o meu código.

// Este é o caso quando o vídeo é ficar parado na clicando fora, mas autoplay não está funcionando

<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>

// Este é o caso quando autoplay está funcionando, mas o vídeo não é ficar parado

<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>

Gentilmente me ajudar se vocês têm enfrentado situação semelhante ou problema.

Publicado 24/10/2019 em 12:57
fonte usuário
Em outras línguas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more