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.

For Example

<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