Spotify Play Button sizing in hidden elements

Question

We have some embedded Spotify play buttons in a paged quiz style wizard/carousel (using jQuery Tools -yuk- to provide the paging functionality); the issue I'm having is that because each question is on a div that is initially hidden, the content of each Spotify iframe is unable to work out which player to render (small vs large).

It would be possible to force a refresh of these iframes when the user scrolls to each panel, but this feels like a hack and a bunch of extra HTTP requests.

Has anyone had any experience with this? Any workarounds that don't require me to multiply requests to Spotify?

Thanks in advance

S

José M. Pérez · Accepted Answer · 2013-10-17T09:32:52.513

The team in charge of the Spotify Play Button has recently released an update that fixes this issue. You don't need to make any change in your embed code.

Here I attach some sample code, together with its jsFiddle.

In example, being this the HTML:

    <button id="show-play">Show Play Button</button>
    <div id="container" style="display:none">
        <iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="300" height="380" frameborder="0" allowtransparency="true">
        </iframe>
    </div>

you change its style CSS property:

    (function() {
        var button = document.getElementById('show-play'),
            container = document.getElementById('container');

        button.addEventListener(
            'click',
            function() {
                container.style.display = 'block';
            },
            false
        );
    })();

You can see it in action in this jsFiddle.

Disclaimer: I'm a Spotify employee.

Spotify Play Button sizing in hidden elements

1 Answers1