CODEWITHSUNDEEP
javascriptjquerywordpress
user3027531
user3027531

Reputation: 282

JavaScript in my wordpress page

Following is my Js code which I have been trying to use in my wordpress page but its not working. Kindly let me know how to write it inside my wordpress page. The main idea of the folllowing function is to unload the Vimeo video which opens up in a modal of plugin easy modal when user click on close

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<script type="text/javascript">
var iframe = $('.vimeo-player')[0];
var player = $f(iframe);

$('.close-modal').click(function() {
    alert('stoped');
    player.api('unload');
});
</script>

You can clearly see the code works fine in this fiddle : http://jsfiddle.net/8CV2S/161/

Iframe Code:

<iframe class="vimeo-player" src="http://player.vimeo.com/video/76079" width="1000px" height="500px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Upvotes: 0

Views: 223

Answers (2)

David
David

Reputation: 219077

Assuming this code is in the head of the page, then the problem is that the elements you're referencing don't exist when the code executes:

$('.vimeo-player')
$('.close-modal')

Since jQuery finds no matches, it doesn't do anything with them. In order to wait for the DOM to finish loading, simply wrap the code in a jQuery function:

$(function () {
    var iframe = $('.vimeo-player')[0];
    var player = $f(iframe);

    $('.close-modal').click(function() {
        alert('stoped');
        player.api('unload');
    });
});

Additionally, you might have a typo here:

var player = $f(iframe);

Unless this is part of the API you're using? (A commenter says it is.) If this is throwing an error on your browser console, something along the lines of $f being undefined, maybe you meant this?:

var player = $(iframe);

That's just a guess, though. I don't know the Vimeo API.

Upvotes: 2

Ivan Nikolchov
Ivan Nikolchov

Reputation: 1584

Try adding it in document.ready: 

$(document).ready(function() { 
  var iframe = $('.vimeo-player')[0];
  var player = $f(iframe);

  $('.close-modal').click(function() {
    alert('stoped');
    player.api('unload');
  });

});

See http://api.jquery.com/ready/

Check if you have any syntax errors.

Upvotes: 1

Related Questions