Why this functions stop working when I load the script into a div?

I’m using the “plyr.js” player and all works perfectly when I open the page separately, but when I load that page inside a div of another (i.e. when I load video.html inside a div of my index.html), the functions stops working…

Any ideas?

The code is the following…

<link rel=’stylesheet’ href=’https://cdn.plyr.io/3.4.6/plyr.css‘>

<video class=”video-fluid” id=”player” poster=”fotos/demo1.jpg” playsinline autoplay loop>
<source src=”demo1.mp4″ type=”video/mp4″>
</video>

<button type=”button” class=”btn js-stop” id=”stop”>Stop</button>

<script src=’https://cdn.plyr.io/3.4.6/plyr.js’></script>
<script>
document.addEventListener(‘DOMContentLoaded’, () => {

controls = [];
player = new Plyr(‘#player’, { controls });
window.player = player;
});
$(“#stop”).click(function(){
player.stop();
});
</script>

Thanks.

Also in #JavaScript _↴