Sizing a Player

 

By default, Wimpy will render a player to the size as defined in the skin. So it is NOT necessary to specify a width or height when establishing a Player in your HTML.

You can over-ride the default skin size for each player within the HTML of the Player Instance two ways:

Using the data- options

This option instructs Wimpy to render the player to a specific size.

Example

<div data-wimpyplayer data-width=200 data-height=100></div>

 

Data- options override CSS. When data-width and data-height exist, CSS width and height are ignored.

NOTES
• See "Available Options" for details on setting width and height as a player option.

 

Using CSS or STYLE rules

In addition to using CSS for positioning, you can apply width and height as well.

This option is nice because when designing your page with an HTML editor, you can get a visual reference as to the size and position of the "bounding box" that the player will be in.

NOTE: The actual player will not display in your HTML editor, because the Wimpy Engine must "run" (load the skin file, playlist etc) to render the player into the page. But by using CSS, you'll at least be able to have some kind of visual reference about the player's size on the page within your code editor.

Width & Height Player Options Override CSS. When data-width and data-height exist, CSS width and height are ignored.

Directly via STYLE attribute

<div style="width:200px;height:100px" data-wimpyplayer></div>


Or with a CSS class

<style>
.myPlayerA {
		width:200px;
		height:100px; 
}
</style>
 							
<div class="myPlayerA" data-wimpyplayer></div>					

 

Another benefit of assigning a class to the Player Instance DIV is that you can establish a 'responsive" player so that the player is sized differently, depending on screen size, via media queries. Check out the "Responsive Design with Wimpy" page for details.

See Also

- Player Positioning
- Responsive Design with Wimpy
- Fullscreen Web-App