Question

I’m trying to make a really minimal player — just a play button, and another button to zoom up to a full-sized player. (Fiddle.)

As far as I can tell, there’s no way to get rid of the white background behind the button. (In the real case, the background is a textured image, so just changing the bg color of the iframe to some other solid color would be less ideal than being able to have a transparent (and borderless) widget.

Fiddle code:

HTML

<div id="player-controls"><a href="#zoom" onclick="$('#player-container').toggleClass('enlarged'); return false"><span>zoom player</span></a></div>
<div id="player-container">
  <iframe width="450" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3036975"></iframe>
</div>

CSS

body {
  position: relative;
  background: black;
  margin: 10px
}

#player-container {
  position: absolute;
  top: 1.5em;
  height: 36px;
  width: 36px;
  overflow: hidden;
  transition: width, height;
  transition-duration: .5s;
  -webkit-transition: width, height;
  -webkit-transition-duration: .5s;
  -moz-transition: width, height;
  -moz-transition-duration: .5s;
  -o-transition: width, height;
  -o-transition-duration: .5s;
}
#player-container.enlarged {
  width: 450px;
  height: 450px;
}
#player-container iframe {
  position:absolute;
  top: -11px;
  left: -177px;
  transition: top, left;
  transition-duration: .5s;
  -webkit-transition: top, left;
  -webkit-transition-duration: .5s;
  -moz-transition: top, left;
  -moz-transition-duration: .5s;
  -o-transition: top, left;
  -o-transition-duration: .5s;
}
#player-controls {
  position: absolute;
  top: 0;
}
#player-controls a {
  color: white;
}
#player-container.enlarged iframe {
  top: 0;
  left: 0;
}

Answer 1

No, unfortunately it’s not currently possible to have custom and transparent background.