​
1. Add it

Since your page and our embed code are on different domains, you need to add some additional JavaScript to use it:

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

​
2. Initialise it

Either pass the HTML element ID as the first parameter:

<div id="your_element_id"></div>

<script>
let player = new Vidbeo.Player("your_element_id", {
  id: "your_video_id",
  width: 1280,
  height: 720
});
</script>

</body>

Or you could do the same with an event listener:

<div id="your_element_id"></div>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    let player = new Vidbeo.Player("your_element_id", {
      id: "your_video_id",
      width: 1280,
      height: 720
    });
  }
</script>

Or you might like to use the Player API to control an existing player. In which case you need to pass a reference to that HTML element as the first parameter. For example:

<iframe src="..." allowfullscreen></iframe>

<script>
  let iframe = document.querySelector("iframe");
  let player = new Vidbeo.Player(iframe);
</script>

There are a variety of options available. The examples above were deliberately kept simple.

​
3. Try it

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 should see the message appear in your browser’s console (usually shown by pressing the F12 key or by opening Developer Tools).