Setting width & height of the player

[CodeCurosity]

Describe the bug

I set the width and height in options but it doesn't seem to accept?

Steps to reproduce

Set width & height in options

Expected behavior

to change width and height of player

Screenshots and recordings

No response

Vlite.js

5.0.2

Browser

114

OS

mac os 13.4

Additional context

No response

[yoriiis]

Hello @CodeCurosity, there is no option in the constructor to set the width and height. It is set in CSS with the aspect-ratio property.

[CodeCurosity]

thank you, can you also help me with how do we make this function work player.pause(); i tried everything and there is no way of pausing or playing the video outside onReady function?

[yoriiis]

I strongly recommend you to manipulate the player only when it is ready, so inside the onReady function.

The following listener on a button will toggle the play.

new Vlitejs('#player', {
  onReady: function (player) {
    document.querySelector('#btn').addEventListener('click', (e) => {
      // if (player.elements.outerContainer.classList.contains('v-paused')) {
      if (player.isPaused === null || player.isPaused) {
        player.play()
        e.currentTarget.innerText = 'Pause'
      } else {
        player.pause()
        e.currentTarget.innerText = 'Play'
      }
    })
  }
})

<button id="btn">Play</button>

You have two ways to detect the state of the player, with the player.isPaused property or with the CSS class v-paused on the parent element. The player.isPaused is set to null before the first start and will be a boolean after.