gyanreyer / hover-video-player Goto Github PK

Hello @Gyanreyer,

Thank you for this library :)

I'm trying to do something but I can't do it with your doc.

I would like to put play and paused each time a link is hovered over a class for example.

But I have the impression that this does not work :

const player = document.querySelector("hover-video-player");

        $(".site-navigation li.page_item").each(function () {
            $(this).on("mouseenter", function () {
                player.playbackState = "play";
            })
            $(this).on("mouseenter", function () {
                player.playbackState = "paused";
            })
        });

I only have this that works:

hover-target=""

But in the end it is not practical if you want to hover over several links. I don't have any additional IDs on my hrefs.

Thanks for your return

Is there an easy way to keep one video playing at all times, even when none is hovering?

I am using WP for one of my projects and barba.js to make it SPA-like.

Plugin is working fine without barba.js and on first page load, however it doesn't work when navigating through pages (using barba) and I can't find any functions to be used to reinit/reload elements.

I tried setting manual hoverTarget which triggers on each page load, but this also works only on first load:

const players = document.querySelectorAll("hover-video-player");
players.forEach((player) => {
  console.log("set hover target", player);
  player.hoverTarget = document.querySelectorAll(".some-hover-target");
});

Output in log is exactly the same for first load and on each page load (through barba), but hover effect is not working.

Is there function I can call to reinit/reload plugin?