I just switched over from Vimeo's API to Plyr.js so I could choose custom posters for my videos. Previously, I hard coded each Vimeo player, so I was able to call the parent of any player once it was played or paused, and change its css accordingly.
Using Plyr, I was able to simplify a lot of this using an array for setup. My only issue is now I am unable to access the parent of any array element.
I've tried a few different parent methods and read through Plyrs documentation, but I'm fairly inexperienced using arrays so I'm sure there is something simple I am missing.
<html>
<div class="filterDiv sound show vid" id="none" name="Sound Reel">
<div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-
id="351623699">
</div>
</div>
</html>
<script>
var t;
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
players.forEach(function(element) {
element.on('play', event => {
parentElement = element.parentElement;
parentElement.setAttribute("id","active");
$('#tail').css('visibility', 'visible');
// Do stuff to parent container
t = setTimeout(function() {
parentElement.setAttribute("id","none");
$('#tail').css('visibility', 'hidden');
}, 3000);
});
element.on('pause', event => {
clearTimeout(t);
parentElement = element.parentElement;
parentElement.setAttribute("id","active");
$('#tail').css('visibility', 'visible');
// Do stuff to parent container
});
});
</script>
My end goal is to detect which video on my page was played or paused, and then to alter its container div with js.
