Kind of late but here's a way to do it without slowing down the page:
Requirements: jQuery and FitVids.js (this makes the iframe responsive without dealing with the css)
jQuery:
$(window).load(function() {
$(".soundcloud-wrapper").each(function() {
var URL = $(this).attr('id');
var htm = '<iframe width="100%" height="200px" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + URL + '&auto_play=false&hide_related=false&show_comments=false&show_user=false&show_reposts=false&visual=true" frameborder="0"></iframe>';
$(this).html(htm).fitVids().removeClass('.loading');
});
});
HTML:
<div class="soundcloud-wrapper" id="60229275"><!-- this loads the iframe without blocking --></div>
CSS
.soundcloud-wrapper iframe {
/* --- your styles if applicable --- */
}
.soundcloud-wrapper.loading {
width:100%;
height:200px;
}
Note: The .loading is a class that's removed when the iframe loads. I'm using it so that a height is there for Masonry layouts otherwise the space is collapsed. It is useful so that the page doesn't jump around even if you're not using Masonry, you'd change the value in both the CSS and the jQuery to reflect your iframe size.