Set the dimensions of a player (Web Player)

Regardless of your use case, JWP allows you to easily set fixed or responsive dimensions for your web player.

If you embed a self-hosted player or create a player with an API call to /players/create, your player is configured to be a fixed-dimensions player with the dimensions of 640x360, by default. A fixed-dimensions player is a good solution if you plan to embed videos in a sidebar, table, or iframe with fixed dimensions. Otherwise, you should configure your player to be a responsive player.

When you configure your player to be a responsive player, you define the width as a percentage and an aspect ratio. The width of the player dynamically adjusts to the available width on the page. The height of the player adjusts proportionally to the width of the player, maintaining the aspect ratio of your video.

💡

When setting the dimensions of a web player, remember the following points:

• The dimensions of a web player should be greater than 0x0.
• If you are embedding a web player into an iframe, the dimensions of the iframe should be greater than 0x0.
• Responsive web players should be placed into responsive iframes.
• Fixed-dimensions players should be placed into fixed-dimensions iframes.

Set the dimensions of a player instance

To set the dimensions for a single instance of a responsive or fixed dimension web player, define the appropriate properties within the JSON object when you call setup(). Using this approach to set the dimensions of a player will override the default settings (self-hosted players) or the globally defined settings (cloud-hosted players).

Responsive player

When creating a responsive web player, the responsive and aspectratio properties are required. The width property is optional.

jwplayer("myElement").setup({ 
  playlist: "https://cdn.jwplayer.com/v2/playlists/xxxxYYYY",
  responsive: true,
  width: "50%",
  aspectratio: "16:9"
});

Fixed-dimensions player

When setting the dimensions of a fixed player, both the height and width properties are required.

jwplayer("myElement").setup({ 
  playlist: "https://cdn.jwplayer.com/v2/playlists/xxxxYYYY",
  width: 480,
  height: 270
});

After a player has been instantiated on a page, you can use resize(width, height) to change the fixed dimensions of a player. Both the height and width arguments are required.

jwplayer("myElement").resize(480, 270);

Set the dimensions of a cloud-hosted player

Use the following steps to set the dimensions for a responsive or a fixed-dimensions web player. This method allows you to control all instances of the cloud-hosted player.

🔑

If you are not a developer, do not have developer resources, or prefer a simpler implementation, you can set the dimensions of a player from your JWP dashboard.