Script works in JSFiddle but not on actual

Question

I've got a script (that also used froogaloop2 https://developer.vimeo.com/player/js-api) that changes the play button on a vimeo vid. It works in JSFiddle but can't get it to work on my actual site. Pressing the play button doesn't do anything, the video doesn't play at all. I've got my scripts organized like so, in the <header> tag. The play/pause script is sitting at the bottom before the <body> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script type="text/javascript"  src="js/TweenMax.min.js"></script>
<script type="text/javascript"  src="js/remodal.min.js"></script> 
<script type="text/javascript" src="js/froogaloop2.min.js"></script>

My full code: https://jsbin.com/fawowaleci/edit?html,css,output
Video script: https://jsfiddle.net/uxhxdcwp/5/
Inside modal: https://jsfiddle.net/qhrmtass/14/

Play/Pause script:

$(function () {
var iframe = document.getElementById('video');
var player = $f(iframe);

player.addEvent('ready', function () {
    player.addEvent('finish', onFinish);
});

$('.playpause').click(function () {
    player.api('paused', function (paused) {
        if (!paused) {
            player.api('pause');
            $(".playpause").removeClass('pause');
        } else {
            player.api('play');
            $(".playpause").addClass('pause');
        }
    });
});

function onFinish(id) {
    $(".playpause").removeClass('pause');
}

});

Update: it as was suggested but no go. I feel its something with the modal code that's messing it up?

may be it is happening because of sandbox .issue related to security. — Suchit kumar, Aug 08 '15 at 13:44
@user2252219 is your actual site on your local development machine or can we see it live somewhere? — jcuenod, Aug 08 '15 at 20:56
@jcuenod Its just local right now. Maybe I'll just publish it live and see if the problem is still there. — user2252219, Aug 09 '15 at 15:01
@user2252219 but there's a big red block that says, "You’ll need to be running on a web server instead of opening the file directly in your browser. Flash and JS security restrictions will prevent the API from working when run locally." — jcuenod, Aug 09 '15 at 15:10

score 4 · Accepted Answer · edited May 23 '17 at 11:58

There are two big reasons why you see your code working fine on JSBin versus locally:

If you right click the output element and look at how it's structured, you'll see that all your scripts are getting shifted to run within the opening and closing body tag, contrary to how you wrote the code.
I assume you put together your sample based on looking at the documentation on the Vimeo API page. Note the red box at the very top of the page that indicates that you won't be able to run this locally. Host the below code on a web server and you'll be able to see it execute as you're expecting.

Generally, it's a good idea to put all your tags either within the <head></head> tags or the <body></body> tags. See the discussion in the comments at Is it wrong to place the <script> tag after the </body> tag? for a plethora of information and opinion on that front.

I've put together a working sample (that works on my web server and in JSBin) for you at https://jsbin.com/mojopalode/edit?html,css,output.

Edit: To address your attached picture, it looks as though you're still running this from your desktop. Please see point #2 I made above for why this would continue to fail to work on your end. If you drop this on a webserver (as I tested it on), it should work without a problem.

@Marcos Dimitrio I set it up just like you did, but nothing. I added a pic to OP. :) — user2252219, Aug 08 '15 at 12:50
Actually, this was answered by @Xaniff, I only edited it to fix the head/body tags. — Marcos Dimitrio, Aug 08 '15 at 15:30
@Xaniff Ahhhh I see. I misunderstood you. Ok cool! Thank you! :) — user2252219, Aug 09 '15 at 15:10

score 0 · Answer 2 · answered Aug 05 '15 at 20:45

0

You should put the scripts, after body tag or initialize variables and listeners on $(document).ready({ });

From looking at your code, only problem I can see is you script runs before actual elements are rendered so its not attaching any listeners to the elements.

answered Aug 05 '15 at 20:45

Dipen Shah

25,562
1
32
58

I thought all scripts needed to be before /body? – user2252219 Aug 05 '15 at 20:50
1

Not really, it actually depends on what you're doing in the script. – Dipen Shah Aug 05 '15 at 20:52
Just gave that a go but nothing. The button still doesn't do anything. :( – user2252219 Aug 05 '15 at 21:01

Script works in JSFiddle but not on actual

2 Answers2