Using jquery.mb.YTPlayer onReady event, how to addclass to body or element?

767 views Asked by At

I'm using jquery.mb.YTPlayer and want to make use of the onReady callback but sadly not having any success.

The documentation on the GitHub page:

onReady: (function) You can pass a function that will be fired once the player is ready; it will pass the YTPlayer object as parameter.

But does not provide an example for someone like me, who knows very little about JavaScript. I want to use onReady to add a class to the body, that way I can use a preloader. I'm attempted coding it myself but had no success, hopefully, you can.

Here is my code:

$(function(){
  $("#bgndVideo").YTPlayer({
    events: {
      onReady: onPlayerReady
    }
  });
  function onPlayerReady(event) {
    $('body').addClass('LOADED');
  }  
});

Have also tried:

$(function(){
  $("#bgndVideo").YTPlayer({
    events: {
      onReady: onPlayerReady
    }
  });
});

function onPlayerReady(event) {
  $('body').addClass('LOADED');
}
2

There are 2 answers

1
Raghavendra Rao On

onReady is an element inside an object which is assigned to the data-property html attribute. I am not sure about the function with onReady syntax. But try using like onReady: 'myFun' (or) onReady: 'myFun()'. In myFun function you can write your required logic. Checkout here as:
<div id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1, onReady:'myFun()'}">My video</div>

0
Simon Hayter On

Got there at the end!, working code:

$(function(){
  $("#bgndVideo").YTPlayer({
    onReady: function(event) {
      $('body').addClass('LOADED');
    }    
  });
});