button - 隐藏元素中的 Spotify 播放按钮大小

Question

我们在分页测验风格的向导/轮播中嵌入了一些 Spotify 播放按钮（使用 jQuery 工具 -yuk- 来提供分页功能）；我遇到的问题是，因为每个问题都在最初隐藏的 div 上，所以每个 Spotify iframe 的内容无法确定要渲染哪个播放器（小与大）。

当用户滚动到每个面板时，可以强制刷新这些 iframe，但这感觉就像一个 hack 和一堆额外的 HTTP 请求。

有没有人有这方面的经验？任何不需要我向 Spotify 增加请求的解决方法？

提前致谢

小号

Answer 1

负责 Spotify 播放按钮的团队最近发布了修复此问题的更新。您无需对嵌入代码进行任何更改。

这里我附上一些示例代码，以及它的 jsFiddle。

例如，这是 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>

你改变它的样式 CSS 属性：

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

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

你可以在这个 jsFiddle中看到它的作用。

免责声明：我是 Spotify 员工。