Question

Currently in my Spotify app I have code to create an album player (see below). The default size for the album player seems to be Medium (128px x 128px).

JavaScript

var sp = getSpotifyApi(1),
models = sp.require("sp://import/scripts/api/models"),
views = sp.require("sp://import/scripts/api/views"),
dom = sp.require('sp://import/scripts/dom');

models.Album.fromURI('spotify:album:2fUrVWDYASjthLVsVH53zP', function(context){
  var player = new views.Player();
  player.context = context;
  sp.dom.adopt(sp.dom.queryOne('#my-album-player'), player.node);
});

HTML:

...
<div id="#my-album-player"></div>
...

The design guidelines (see item 16.5) suggest that there are Samll, Medium, Large, and XL cover sizes available.

How can I modify my code to create an album player with a Large (200px x 200px) cover image?

The documentation for the Player view doesn’t seem to help.

I have tried styling the #my-album-player div, using CSS, to be the desired size, but this didn’t adjust the cover size.

Answer 1

It turns out this can be done with CSS:

.sp-player {
  display: block !important; 
  height: 100% !important; 
  width: 100% !important;
}

#wrapper {
  width: 200px;
  height: 200px;
}

And the HTML:

<div id="wrapper">
  <div id="#my-album-player"></div>
</div>

Thanks to Simon on the freenode #spotify IRC channel.