Formatting playlists

The Playlist plugin in the builder allows you to customize the playlist design — location, horizontal or vertical direction, colors, dimensions etc. Additionally, you can customize the content formatting within each playlist element using a simple HTML layout in the title parameter. For example, you can place a picture and duration.

You need to reset the Size of the activity icon option if you want to stretch pictures to the full width of the block. You can see how it is work in this template (the playlist is specified in Settings / File). Formatting of such an element:

{"title":"<img src='picture-url' width='100%'><div style='position:absolute;right:15px;top:15px;background:#ff0000;color:#fff;padding:0 5px;font-size:70%'>00:48</div>Description","file":"media-url"}

On your site, you should move the CSS out and assign style identifiers to the desired elements.

{"title":"<img src='picture-url' class='playlist_poster'><div class='playlist_duration'>00:48</div>Description","file":"media-url"}

CSS:

.playlist_poster{
   width:100%
}
.playlist_duration{
   position:absolute;right:15px;top:15px;background:#ff0000;color:#fff;padding:0 5px;font-size:70%
}

---