Buy WavePlayer now, only on

Big Thumbnail, Small Waveform

This is a perfect example of how deep it is possible to customize WavePlayer. The customization shown in this example can be achieved simply by adding few CSS rules to your stylesheet or to the Custom CSS box of the WavePlayer settings. Without those rules, the player you see on this page would display exactly like the one on the homepage. This is the set of CSS rules that allow to transform the default player into the one shown on this page:
.waveplayer{
    display:flex;
    flex-direction:column;
}
.wvpl-left-box{
    width: 100%;
    max-width:300px;
    position: relative;
    display:table;
    border-radius:0;
}
.wvpl-left-box::before{
    content:"";
    width:100%;
    padding-top: 100%;
    display:table;
}
.wvpl-right-box {
    width:100%;
    max-width:300px;
    height:80px;
    margin:0;
    margin-top:-80px;
    background-color: rgba(0,0,0,0.75);
    z-index:200;
}
.wvpl-waveform{
    margin:10px;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
}
.wvpl-infobar{
    visibility:hidden;
}
.wvpl-interface,.wvpl-poster {
    top:0;
}
.wvpl-interface:hover{
    background:none;
}
.wvpl-volume-overlay{
    display:none;
}
.wvpl-info,.wvpl-volume,
.wvpl-position,.wvpl-duration{
    visibility:hidden;
}
.wvpl-icon {
    font-size: 36px!important;
}

With the style described by those rules, the thumbnail expands responsively, adapting to the width of its container up to a maximum of 300px. If the container is larger, the player sits in the center, 300px wide. You can adjust those rules to your specific case.

You can easily limit this style to a certain page or set of pages simply by prefixing all the rules above with the class of a container that pertains to that page or set of pages. For example, if you wanted to assign this aspect for all the players in the WooCommerce Shop page, it would be enough to write all those rules with the .products (plural).

Buy WavePlayer now, only on