> ## Documentation Index
> Fetch the complete documentation index at: https://developers.vidbeo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Get started

> Use our Player API to control the player using JavaScript

## 1. Add it

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

```html theme={null}
<script src="https://player.vidbeo.com/sdk/api.js"></script>
```

## 2. Initialise it

*Either* pass the HTML element ID as the first parameter:

```html theme={null}
<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:

```html theme={null}
<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:

```html theme={null}
<iframe src="..." allowfullscreen></iframe>

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

There are a variety of [options](/player-api/v1/reference/options) available. The examples above were deliberately kept simple.

## 3. Try it

Check the player is ready. That returns a *Promise*. For example:

```javascript theme={null}
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*).