Popup window on youtube api event

Question

I'm using simplemodal to popup a modal window. I've tested the modal window functionality and it is all working fine.

I have a hidden div element:

        <div id="form-box" class="form-box" style="display:none;">
        <div class="form-crop">
        <script type="text/javascript"         src="https://releasetechnique.infusionsoft.com/app/form/iframe/84f82828ea34c2a633bbe0a87560586c"></script>
        </div>
        </div>

this pops up just fine if as I tested it with a timer.

    <script type="text/javascript">
    $(function() {
    setInterval(update, 1000);
    });

    function update() {
    $("#form-box").modal();
    }
    </script>

Now what I'm trying to do is grab the information from Youtube's API, which I've successfully tested with the following:

    function onYouTubePlayerReady(playerId) {
        $ytplayer = document.getElementById("myytplayer");
        $ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }

    function onytplayerStateChange(newState) {
        alert("Player's new state: " + newState);


    }

This works as intended. It returns the current player state, and any time the player state is changed the alert lets me know.

Now, what I want to do is popup the modal window, when the player state is equal to 0. 0 means the player has stopped. So basically, 0 is returned as newstate once the Youtube video finishes playing.

I've tried the following and can't get it to work. Any suggestions?

    function onYouTubePlayerReady(playerId) {
        $ytplayer = document.getElementById("myytplayer");
        $ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }

    function onytplayerStateChange(newState) {
        if(newstate === 0) {
            $("#form-box").modal(); 
        }
    }

Obay · Accepted Answer · 2012-04-06T18:52:17.950

1

$("form-box").modal(); should be $("#form-box").modal();
Are you sure newState is a number? If not, you might want to use == instead of ===
Remove other unused jQuery plugins in your page. They could be causing conflicts.

edited Apr 06 '12 at 18:52

answered Apr 06 '12 at 18:14

Obay

3,135
15
55
78

i must have just edited the # as i noticed that too. im not sure its a number ill try == instead and let you know – RezenX Apr 06 '12 at 18:17
tested with == instead of === and still isnt firing. – RezenX Apr 06 '12 at 18:18
what does console.log() say `newState`'s value is? – Obay Apr 06 '12 at 18:19
says not defined... not sure why – RezenX Apr 06 '12 at 18:23
what was the value of `newState` when the content of `onytplayerStateChange()` was still `alert("Player's new state: " + newState);`? – Obay Apr 06 '12 at 18:27
i just changed it back to the alert and it still returned undefined – RezenX Apr 06 '12 at 18:28
this has been driving me nuts for over a week! – RezenX Apr 06 '12 at 18:29
could you turn your `alert` into `console.log()` please? – Obay Apr 06 '12 at 18:32
i tested, and when the video ended, console.log said `Player's new state: 0`. could you change the contents of your `if(newstate === 0) {}` to `alert('video finished');` – Obay Apr 06 '12 at 18:37
that works so it must be something with calling the simple modal function...i know simplemodal worksbecause i tested that. i can show you on the update function if you want to verify – RezenX Apr 06 '12 at 18:42
ok change it back to `$("#form-box").modal();`. are you using fancybox? if not, remove it from your code. it could be causing conflicts – Obay Apr 06 '12 at 18:43
BOOM! it must have been fancy box. i dont think it was actually being used anywhere. however i didnt design the page so im not sure. – RezenX Apr 06 '12 at 18:47
weird though. i left fancy box and tested again and it still works haha – RezenX Apr 06 '12 at 18:52
thanks for your help ma, much appreciated. who knows what it was i swear i tried all of this stuff. now i can finally relax, thing has been driving me crazy! – RezenX Apr 06 '12 at 19:00
i refreshed the page, the one where you re-added fancybox, and the simplemodal doesn't show up when the video ends. (by the way, change `alert` to `console.log` cos it's annoying lol) – Obay Apr 06 '12 at 19:01

Popup window on youtube api event

1 Answers1