 <p>I agree with JDillon's answer to set the data-src and then switch the src when ready to init the player. Like so: </p> <p><strong>html</strong></p> <pre><code>&lt;iframe id="sc-widget" width="0" height="0" scrolling="no" frameborder="no" src="" data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/3333333%3Fsecret_token%3Dx-xxxx&amp;amp;auto_play=false&amp;amp;hide_related=false&amp;amp;show_comments=true&amp;amp;show_user=true&amp;amp;show_reposts=false&amp;amp;visual=true"&gt;&lt;/iframe&gt; </code></pre> <p><strong>js</strong> (es6)</p> <pre><code>let widgetIframe = document.getElementById('sc-widget') widgetIframe.src = widgetIframe.dataset.src let $embedPlayer = SC.Widget(widgetIframe) /* example of using soundcloud embed player */ $embedPlayer.bind(SC.Widget.Events.PLAY, () =&gt; { $embedPlayer.getDuration((duration) =&gt; setDuration(duration)) }) $embedPlayer.bind(SC.Widget.Events.PLAY_PROGRESS, () =&gt; { $embedPlayer.getPosition((position) =&gt; setPosition(position)) }) function setPosition(pos) { console.log(pos) } function setDuration(dur) { console.log(dur) } </code></pre> <p>Then I also agree with adi's answer that you cannot use <code>display: none;</code> to hide the player if you are creating your own player to control the soundcloud embed player. In this case you need to hide it with the following styles:</p> <p><strong>css</strong></p> <pre><code>iframe { max-width: 10rem; opacity: 0; position: absolute; visibility: hidden; } </code></pre>