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