Responsive Design with Wimpy

Wimpy is set up to integrate nicely into web pages of all sizes -- including pages that leverage "media queries".In addition, Wimpy can be set up to "fill up" space when using fluid layouts and percentages in your CSS.

To enable a Wimpy Player to change size automatically, you'll need to do two things:

1. Add a "style" or "class" to a Player Instance (or Target Element).
2. Add the "responsive" player option.

Wimpy only honors the "responsive" player option when a target DIV or a Player Instance has a style or class attribute assigned. Without a style or class assignment, Wimpy will ignore the "responsive" player option.

Example

<div class="myClassName" data-wimpyplayer data-responsive></div>

 

NOTE: If you're using Javascript to establish a player, the "target" DIV must have a "style" or "class" attribute.

Example when using Javascript

<div class="myClassName" id="myWimpyTarget">
<script>
new wimpyplayer({
    target : "myWimpyTarget",
    responsive : 1
});
</script>                    

Fluid Layouts and Percentages

The style or class can also leverage "percentages" (rather than fixed "px" pixel dimensions). When a style or class uses percentages for the width and height, and when the "responsive" option set, Wimpy will automatically resize to fit.

Example

<div style="width:100%;height:100%" data-wimpyplayer data-responsive></div>

Media Queries Example

In a nut-shell, Media Queries are special CSS rules that allow web page's to change shape based on device orientation, or screen/window size.

To leverage media queries design, you'll need to enable the "responsive" player option.

<style>

.myPlayerA {
		width:200px;
		height:100px; 
}

@media only screen and (max-width: 768px) {
		.myPlayerA {
			width:400px;
			height:200px;
		}
}

@media only screen and (max-width: 479px) {
		.myPlayerA {
			width:100px;
			height:50px;
		}
}

</style>
 							
<div class="myPlayerA" data-responsive data-wimpyplayer></div>					

See Also

- Player Sizing