Play Vimeo Videos on Hover (player.js)-CodePudding

I have multiple (but unknown) number of Vimeo video embeds on my page that I would like to each play on hover.

I have worked out how to get one to hover but my limited JS knowledge is now preventing me from getting this into a loop of some sort to programatically create a player for each video and then reference the correct one on hover.

Here is my code so far

<div ><div style="padding:75% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/745178758?h=cc048cba55&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Present Momentum _ No Brakes Ep 10 Presented by Afterpay (1).mp4"></iframe></div></div>

<div ><div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/745152170?h=8594922fdc&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="EE_Hope_United_60sec_Ex_Kids_Subtitled_H264.MP4"></iframe></div></div>

<script src="https://player.vimeo.com/api/player.js"></script>

const iframe = document.querySelector('iframe');
const player = new Vimeo.Player(iframe);


$('.work__is-video').hover(function() {
    player.play();
    console.log("hovered");
  }, function() {
    player.pause();
});

How can get each video to hover independently please?

Many thanks!

CodePudding user response：

As per the DOM there should some interaction between the user and web page. Without dom get actual interaction till your any api will not work it will throw error.

You also can make any click event after page load for one time intraction. After it your hover video play will definitely work.

Note - For multiple player API you need to modify your script as per multiple player id will be there. You can make it using jQuery each or any back-end scripting language.

Edit I tried something for your question and get it done using simple trick

$( document ).ready(function() {
    var video_frame = document.querySelectorAll("iframe");
    var play_btn = document.querySelectorAll(".work__is-video");
    var nodelist = video_frame.length;
    for (i = 0; i < nodelist; i  ) {
        el = video_frame[i];
        let player = new Vimeo.Player(el);
        player.pause();
        $(play_btn[i]).hover(function() {
            player.play();
            console.log("hovered");
        }, function() {
            player.pause();
        });
        player.on('play', function () {
            console.log('played the video!');
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>

<div ><div style="padding:75% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/745178758?autoplay=1&loop=1&autopause=0&muted=1&transparent=1&api=1&&quality=720p&" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Present Momentum _ No Brakes Ep 10 Presented by Afterpay (1).mp4"></iframe></div></div>
<div ><div style="padding:75% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/745152170?autoplay=1&loop=1&autopause=0&muted=1&transparent=1&api=1&&quality=720p&" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Present Momentum _ No Brakes Ep 10 Presented by Afterpay (1).mp4"></iframe></div></div>