Spotify iFrame无法在Bootstrap模式下正确显示？

Question

I am attempting to input a Spotify playlist into a Bootstrap Modal, but instead of being a "Large" button, it is a "Compact" button. It is displaying this way in the modal:

And the code for the bootstrap and iframe is

 <!-- Modal -->
<div id="spotify_player" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Spotify Player</h3>
  </div>
  <div class="modal-body">
    <iframe src="https://embed.spotify.com/?uri=spotify:user:1210474735:playlist:1u4MR4ER329f64KjsRrcnA" width="445" height="525" frameborder="0" allowtransparency="true"></iframe>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

And on the src of the iframe displays as:

Which is how it should. What do I need to do to get the first image having the playlist/"Long" button like the second one? Thanks.

Answer 1

Bootstrap's hide class will set display style to none, which hides the iframe as well. This will cause the Play button to be compact, regardless of the width and height ratio of the iframe.

It's understandably not the expected behaviour of the Spotify Play button, and I've filed a bug report so that the people closest to the code can take a look at it.