Player Positioning

 

Players are renderd INSIDE the establishing DIV tag.  One might say these establishing DIVs are "wrappers".

HTML "Player Instance" example

<div data-wimpyplayer>
	<!-- Player renders inside here -->
</div> 						

 

Javascript "Target" Example

<div id="MyTarget">
	<!-- Player renders inside here -->
</div> 

 

Since the actual player get's rendered inside you can apply any CSS to the wrapper DIV.  For example, if we want to place the player in the top corner of the page we could use:

<div style="position:absolute;left:0px;top:0px" data-wimpyplayer></div>

 

Or we could create a CSS class and apply the class to the wrapper as:

<style>
.myPlayerPosition {
		position:absolute;
		left:0px;
		top:0px; 
}
</style>
 							
<div class="myPlayerPosition" data-wimpyplayer></div>


In addition to using CSS for positioning, you can apply width and height as well. See the "Player Sizing" for more info.

Existing CSS

While the wrapper DIV is left untouched by wimpy, it is still subject to any other CSS on your page. And since CSS is "cascading" the wrapper may inherit styles from it's parent.

So you may want to wrap the wimpy in a container, then use your HTML/CSS editor to style the container.

<!-- Wimpy Container -->
<div class="wimpyContainer"> <!-- Wimpy Player Instance --> <div data-wimpyplayer></div> </div>

 

Another approach would be to place wimpy into a TABLE container. This generally provides an easier solution for folks who are not all that familiar with CSS.

<!-- Wimpy Container -->
<table width="200" border="0" cellspacing="0" cellpadding="10"> <tr> <td>
<!-- Wimpy Player Instance --> <div data-wimpyplayer></div>
</td> </tr> </table>

 

 

See Also

- Player Sizing