Vimeo Player button won't show up

Question

I have following script in the <body>:

<script>
(function($) {
        var buttonShowed = false;
        var vPlayer = new Vimeo.Player($('#video0 iframe'));
        vPlayer.on('timeupdate', function(time) {
            if ((time.seconds >=580) && (!buttonShowed) ) {
                buttonShowed = true;
              $('#delayed-button') .css('visibility','visible');
            }
        });

})(jQuery);
</script>

In the <head>:

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

The Vimeo Video got the ID video0 and the button got the ID delayed-button.

On my phone the button shows on 580 seconds but with different browsers (Chrome, Opera, Safari) on my PC the button does not show up.

I really don't why, can you help me?

Why the space between `$('#delayed-button')` and `.css()`? – Ionut Necula Dec 17 '16 at 15:12 — Ionut Necula, Dec 17 '16 at 15:12

Ionut Necula · Accepted Answer · 2016-12-17T15:24:08.373

0

Try using a div element instead of an iframe and it should work. It seems that timeupdate is not working with iframe.

I've made you a working fiddle here. The full code:

var buttonShowed = false;
 var vPlayer = new Vimeo.Player($('#video0 #player'));
 vPlayer.on('timeupdate', function(time) {
   console.log(time.seconds);
   if ((time.seconds >= 570) && (!buttonShowed)) {
     buttonShowed = true;
     $('#delayed-button').css('visibility', 'visible');
   }
 });

#delayed-button{
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://player.vimeo.com/api/player.js'></script>
<div id='video0'>
  <div data-vimeo-id="76979871" data-vimeo-autoplay="true" id="player"></div>
</div>
<div id='delayed-button'>
  button
</div>

edited Dec 17 '16 at 15:24

answered Dec 17 '16 at 15:17

Ionut Necula

11,107
4
45
69

@ZweiRad Awesome. Please don't forget to accept the answer if it helped you. – Ionut Necula Dec 19 '16 at 12:41
1

Thats what I needed! BIG Thank you lonut :) worked like a charm. But sometimes the button still does not show up.. idk if its because of cookies or other things.. – Zwei Rad Dec 19 '16 at 12:41
When you mean sometimes can you give me an example? On what browser? In your code I don't see any cookies. So it shouldn't be a problem. It may be a problem from the API. – Ionut Necula Dec 19 '16 at 12:44
Thanks for your response, Ionut! So I'm using iOS with Chrome, but also in Opera and Safari it does not work on some times of the day.. maybe it worked and 20-30 minutes later it won't anymore just on firefox.. – Zwei Rad Dec 19 '16 at 13:08
@ZweiRad, so I've did some quick reasearch and I came across this link http://stackoverflow.com/questions/35967342/vimeo-player-js-api-is-not-working-in-ios . See that guy answer. Maybe woud help. I think there's nothing you can do in this case. It depends on the device. – Ionut Necula Dec 19 '16 at 13:10
it's really kind of you to help me out with that, Ionut. Glad some people on the net are that nice. So I tried some other devices like smartphone ipad and others - seems to be the problem with ios (mac/imac, or others) .. hopefully the most have windows pcs then :P – Zwei Rad Dec 19 '16 at 13:16
again thank you for helping me out, I will figure out how to handle that now, maybe the delayed button is not the best solution for this! – Zwei Rad Dec 19 '16 at 13:17
@ZweiRad, You're welcome. I think I came across sometime on a similar problem with something else on iOS. It was a timer of someking which didn't work on iOS on page load. It needed the user interaction to work. Like a click event. So try to do what you do now by click of a button. Maybe this will help. – Ionut Necula Dec 19 '16 at 13:20

Vimeo Player button won't show up

1 Answers1