Criei uma modal que abre ao clicar numa imagem, dentro dessa modal terá um video do youtube e um pequena descrição do lado, no entanto sempre que fecho a modal o video continua a reproduzir. Queria que o video pausasse ao clicar em fechar e (se possível) começasse a reproduzir sozinho ao abrir a modal. Já tentei vários códigos Java mas parece que por algum motivo nenhum funciona com o meu código.
O meu código é o seguinte:
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '365,99',
width: '650',
videoId: 'd0D8tTtY4lU',
});
$(".text").on("click", function() {
player.playVideo();
});
}
</script>
</head>
<body>
<a href="#abrirmodal"><div class="container"><img class="image"
src="https://cdn.flickeringmyth.com/wp-content/uploads/2017/05/Paddington-2-
posters-1-header.jpg" alt="Paddington 2 - Trailer" ><div class="middle">
<div class="text"><img src="play.png" alt="play" width="60" height="60">
</div>
</div></div></a>
<div id="abrirmodal" class="modalDialog">
<div>
<table border="1">
<a href="#fechar" title="Fechar" class="fechar">x</a>
<tr>
<td ROWSPAN="2"> <div id="player"></div>
</div> </td>
<td><h2>Modal</h2></td></tr>
<tr><td>Esta é uma simples janela de modal.
Você pode fazer qualquer coisa aqui, página de Login, pop-ups, ou
formulários.</td></tr>
</table>
</div>
</div>
</body>
Já tentei utilizar o link iframe do Youtube em vez da API, mas também não consegui. A função:
$(".text").on("click", function() {
player.playVideo();
});
Também parece não funcionar, tanto para começar a reprodução como para pausar.