Get started #

If you would like to control a player embedded on your site using JavaScript you can use our Player API. Since your page and our embed code are on different domains, you need some additional JavaScript to use it.

1. Include our Player API on your page:

<script
  type="text/javascript"
  src="https://player.vidbeo.com/sdk/api.js"
></script>

2. Next you need to initialise it. That can either be done at the end of your page before the closing </body> tag, like this:

<script>
// initialise the API here
</script>
</body>

... or wrapped in an event listener and put anywhere on your page, like this:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      // initialise the API here
  }
</script>

3. What you put in place of // initialise the API here depends on whether you have already got one of our videos on your page:

• If you already have one of our iframes on your page, you need to pass a reference to it. For example:

var iframe = document.querySelector("iframe");
var player = new Vidbeo.Player(iframe);

• If you don't already have an iframe on your page, our player API can build one for you. At a minimum you need to tell it where to put that video on the page and which video to embed. Let's assume you have this empty div element on your page:

<div id="example"></div>

Pass its id as the first parameter to Player().

And we need to say which video to embed in it. So in the second parameter provide the video's id (many other options are available):

var player = new Vidbeo.Player("example", {
  id: "longvideoid",
  width: 640,
  height: 360,
});

Either way you should now have a player variable ready to control!

4. (optional) You can check the player is ready. That returns a Promise. For example:

player
  .ready()
  .then(function (data) {
    console.log("Player is ready");
  })
  .catch(function (error) {
    console.error("Player is not ready", error);
  });

You can find out all the available methods and events you can listen out for on the actions page.